vue typical

Bahasa Inggris | 简体中文

Vue tipikal

Vue Animated Typing di ~ 400 byte? dari JavaScript. Pratinjau →

Demo langsung https://vue-typical.vercel.app

? Instalasi

Instal dengan benang

yarn add vue-typical

Atau Anda bisa

npm install vue-typical

Atau menyuntikkan skrip di halaman Anda oleh jsdelivr cdn

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

Perpustakaan ini hanya mendukung vue 3 sekarang

Jika Anda Vue 2, silakan lihat cabang V1 dan instal [email protected]

Penggunaan

1. Komponen

Anda dapat mengimpornya sebagai komponen khusus.

< 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. Plugin API

Jika Anda ingin mengonfigurasi opsi default, Anda dapat mendaftarkan plugin ini melalui Use API Vue.js.

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

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

Jika Anda menggunakan API plugin, komponen VTypical akan didaftarkan sebagai komponen global seperti ketika memasukkannya dengan tag script , tetapi Anda tidak perlu mendaftar ulang melalui properti components dalam komponen Anda sendiri.

3. API Komposisi

Anda juga dapat membuat animasi khas dengan komposisi API useTypical .

 const ref = useTypical ( options ) ;

Segera hadir ...

? Properti

Menopang	Diperlukan	Jenis	Misalnya.
steps	BENAR	Array <String | Nomor | Fungsi>	['Hello', 1000, () => alert('Word')]
loop	PALSU	Nomor	1 atau 'Infinity'
wrapper	PALSU	Rangkaian	'div'

Gaya

Tambahkan efek Kursor Blink dengan blink ClassName.

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

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

? Segera hadir

• Demo API Komposisi di Vue 3.0
• Vue 2 & 3 yang didukung

? Menyumbang

Instal dependensi,

$ npm i

Mulai server dev,

$ npm start

Bangun dokumentasi,

$ npm run docs:build

Bangun Perpustakaan Melalui father-build ,

$ npm run build

❤️ Kontributor

Terima kasih kepada orang -orang ini:

Silakan menikmati dan berpartisipasi dalam open source!

Stargazer

Terima kasih atas bintang Anda!

? Lisensi

Perpustakaan ini didasarkan pada @camwiegert/pekerjaan khas dan saat ini hanya pembungkus untuk Vue.

Terinspirasi oleh @CatalinMiron/React-Typical.

MIT © Turkyden