vue typical

英語| 简体中文

典型的なVue

Vue Animated Typing in〜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

デフォルトオプションを構成する場合は、vue.jsのAPIを使用してこのプラグインを登録できます。

 // 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カーソル効果を追加します。

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

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

？近日公開

• VUE 3.0の構成APIのデモ
• サポートされたVUE 2＆3

？貢献する

依存関係をインストールし、

$ npm i

開発サーバーを開始し、

$ npm start

ドキュメントを作成し、

$ npm run docs:build

father-buildを介してライブラリを構築し、

$ npm run build

❤貢献者

これらの人々に感謝します：

オープンソースにお気軽に楽しんで参加してください！

スターゲイザー

あなたの星をありがとう！

？ライセンス

このライブラリは @camwiegert/典型的な作業に基づいており、現在はVueのラッパーにすぎません。

@catalinmiron/React-Typicalに触発されました。

MIT©Turkyden