vue typical

Englisch | 简体中文

Vue typisch

VUE animiertes Tippen in ~ 400 Bytes? von JavaScript. Vorschau →

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

? Installation

Mit Garn einbauen

yarn add vue-typical

Oder du kannst

npm install vue-typical

Oder injizieren Sie das Skript auf Ihrer Seite von Jsdelivr CDN

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

Diese Bibliothek unterstützt jetzt nur Vue 3

Wenn Sie Vue 2 sind, sehen Sie sich die Filiale v1 an und installieren Sie [email protected]

Verwendung

1. Komponente

Sie können es als benutzerdefinierte Komponente importieren.

< 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

Wenn Sie Standardoptionen konfigurieren möchten, können Sie dieses Plugin über die Verwendung von API von VUE.JS. registrieren.

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

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

Wenn Sie die Plugin-API verwenden, wird die VTypical Komponente als globale Komponente genauso registriert, wie bei der Einbeziehung mit dem script Tag, sie müssen sie jedoch nicht über die components in Ihren eigenen Komponenten erneut registrieren.

3.. Kompositionsapi

Sie können auch eine typische Animation durch die Kompositions -API useTypical erstellen.

 const ref = useTypical ( options ) ;

Bald kommen ...

? Eigenschaften

Stütze	Erforderlich	Typ	Z.B.
steps	WAHR	Array <String | Nummer | Funktion>	['Hello', 1000, () => alert('Word')]
loop	FALSCH	Nummer	1 oder 'Infinity'
wrapper	FALSCH	Saite	'div'

Stil

Fügen Sie den Blink Cursor -Effekt mit blink -Klassenname hinzu.

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

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

? Bald kommen

• Die Demo der Kompositions -API in Vue 3.0
• Unterstützt Vue 2 & 3

? Beitragen

Abhängigkeiten installieren,

$ npm i

Starten Sie den Dev -Server,

$ npm start

Dokumentation erstellen,

$ npm run docs:build

Bibliothek über father-build bauen,

$ npm run build

❤️ Mitwirkende

Danke geht an diese Leute:

Bitte genießen Sie Open Source!

Stargazer

Danke für deinen Stern!

? Lizenz

Diese Bibliothek basiert auf @camwiegert/typischer Arbeit und ist derzeit nur ein Wrapper für Vue.

Inspiriert von @catalinmiron/react-typisch.

MIT © Turkyden