หน้าแรก>การเขียนโปรแกรมที่เกี่ยวข้อง>ส่วนประกอบของบุคคลที่สาม
ดาวน์โหลด

ภาษาอังกฤษ | 简体中文

vue ทั่วไป

Vue ภาพเคลื่อนไหวพิมพ์ใน ~ 400 ไบต์? ของ JavaScript ดูตัวอย่าง→

การสาธิตสด https://vue-typical.vercel.app

- การติดตั้ง

ติดตั้งด้วยเส้นด้าย 

yarn add vue-typical

หรือคุณทำได้ 

npm install vue-typical

หรือฉีดสคริปต์ที่หน้าของคุณโดย jsdelivr cdn 

 < script src =" https://cdn.jsdelivr.net/npm/vue-typical@latest/dist/vue-typical.umd.js " > </ script >

ห้องสมุดนี้รองรับ Vue 3 ตอนนี้

หากคุณเป็น Vue 2 โปรดดู Branch V1 และติดตั้ง [email protected]

การใช้งาน

1. ส่วนประกอบ

คุณสามารถนำเข้าเป็นองค์ประกอบที่กำหนดเอง 

< template >
  < v-typical
    class = " blink "
    :steps = " ['Hello', 1000, 'Hello World !', 500, 'Hello World ! ', 1000] "
    :loop = " Infinity "
    :wrapper = " 'h2' "
  ></ v-typical >
</ template >

< script lang="ts">
import VTypical from ' vue-typical ' ;

export default {
  components: {
    VTypical ,
  },
};
</ script >

2. ปลั๊กอิน API

หากคุณต้องการกำหนดค่าตัวเลือกเริ่มต้นคุณสามารถลงทะเบียนปลั๊กอินนี้ผ่านการใช้ API ของ Vue.js 

 // main.js or index.js
import VTypical from 'vue-typical' ;

Vue . use ( VTypical , {
  /* options */
} ) ;

หากคุณใช้ปลั๊กอิน API ส่วนประกอบ VTypical จะลงทะเบียนเป็นส่วนประกอบทั่วโลกเช่นเดียวกับเมื่อรวมไว้ในแท็ก script แต่คุณไม่จำเป็นต้องลงทะเบียนใหม่ผ่านคุณสมบัติ components ในส่วนประกอบของคุณเอง

3. องค์ประกอบ API

นอกจากนี้คุณยังสามารถสร้างภาพเคลื่อนไหวทั่วไปโดยองค์ประกอบ API useTypical 

 const ref = useTypical ( options ) ;

เร็วๆ นี้ ...

- คุณสมบัติ

ข้อต่อ ที่จำเป็น พิมพ์ เช่น
steps จริง อาร์เรย์ <สตริง | หมายเลข | ฟังก์ชั่น> ['Hello', 1000, () => alert('Word')]
loop เท็จ ตัวเลข 1 หรือ 'Infinity'
wrapper เท็จ สาย 'div'

สไตล์

เพิ่มเอฟเฟกต์เคอร์เซอร์กะพริบด้วย blink ClassName 

. blink :: after {
  content : '|' ;
  animation : blink 1 s infinite step-start;
}

@keyframes blink {
  50 % {
    opacity : 0 ;
  }
}

- เร็วๆ นี้

  • การสาธิตขององค์ประกอบ API ใน Vue 3.0
  • รองรับ Vue 2 & 3

- มีส่วนช่วย

ติดตั้งการพึ่งพา 

$ npm i

เริ่มเซิร์ฟเวอร์ dev 

$ npm start

สร้างเอกสาร 

$ npm run docs:build

สร้างห้องสมุดผ่าน father-build 

$ npm run build

❤ผู้สนับสนุน

ขอบคุณไปกับคนเหล่านี้:

โปรดอย่าลังเลที่จะเพลิดเพลินและมีส่วนร่วมในโอเพ่นซอร์ส!

ดาวรุ่ง

ขอบคุณสำหรับดาวของคุณ!

- ใบอนุญาต

ห้องสมุดนี้ใช้งาน @camwiegert/งานทั่วไปและปัจจุบันเป็นเพียง wrapper สำหรับ Vue

แรงบันดาลใจจาก @catalinmiron/react-typeric

mit © turkyden

ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด