vue typical

Anglais | 简体中文

Vue typique

Vue animée en tapant ~ 400 octets? de JavaScript. Aperçu →

Demo en direct https://vue-typical.vercel.app

? Installation

Installer avec du fil

yarn add vue-typical

Ou tu peux

npm install vue-typical

Ou injectez le script sur votre page par jsdelivr cdn

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

Cette bibliothèque ne prend en charge que Vue 3 maintenant

Si vous êtes vue 2, veuillez consulter la branche v1 et installer [email protected]

Usage

1. Composant

Vous pouvez l'importer en tant que composant personnalisé.

< 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 du plugin

Si vous souhaitez configurer les options par défaut, vous pouvez enregistrer ce plugin via l'API Utiliser Vue.js.

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

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

Si vous utilisez l'API du plugin, le composant VTypical sera enregistré comme un composant global, tout comme lors de l'inclusion avec la balise script , mais vous n'aurez pas besoin de le réenregistrer via la propriété components dans vos propres composants.

3. API de composition

Vous pouvez également créer une animation typique par l'API de composition useTypical .

 const ref = useTypical ( options ) ;

À venir ...

? Propriétés

Soutenir	Requis	Taper	Par exemple, par exemple
steps	Vrai	Array <String | Numéro | Fonction>	['Hello', 1000, () => alert('Word')]
loop	FAUX	Nombre	1 ou 'Infinity'
wrapper	FAUX	Chaîne	'div'

Style

Ajoutez l'effet du curseur de clignotement avec le nom de classe blink .

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

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

? À venir

• La démo de l'API de composition dans Vue 3.0
• Soutenu les Vue 2 et 3

? Contribuer

Installez les dépendances,

$ npm i

Démarrez le serveur de développement,

$ npm start

Construire une documentation,

$ npm run docs:build

Construire une bibliothèque via father-build ,

$ npm run build

❤️ Contributeurs

Merci à ces gens:

N'hésitez pas à profiter et à participer à l'open source!

Des étoiles

Merci pour votre étoile!

? Licence

Cette bibliothèque est basée sur @ camwiegert / travail typique et il n'est actuellement qu'un wrapper pour Vue.

Inspiré par @ CattinMiron / React-typical.

MIT © Turkyden