VueTyperについて

VueTyperとは

タイピングアニメーションを簡単に実装するVueのライブラリ
ちなみに似たようなライブラリにvue-typed-jsというライブラリもあります。
GitHub：vue-typed-js

参考URL

GitHub リポジトリ
VueTyper Demo
- 各種値とかのシュミレーションができるページ

導入方法

npmからvue-typerをインストール

npm install --save vue-typer
※CDNもあります。

コンポーネントへの読み込み

グローバル設定

import VueTyperPlugin from 'vue-typer'
Vue.use(VueTyperPlugin)

使用するコンポーネント毎に設定

import { VueTyper } from 'vue-typer'

export default {
  components: {
    VueTyper
  },

  ...
}

使用方法

タイピングさせたいテキストをテンプレート内に記述。
<vue-typer text="Hello World!"></vue-typer>
text="〜"の部分がタイピングアニメーションで表示される。

アニメーション設定の各種値について

各種値を設定することで、カーソルの動きや表示までの速度等を調整出来ます。
設定できる項目と概要は以下のとおりです。

項目名	説明	設定可能な値
text	アニメーションさせるテキストを設定します。	文字列配列
repeat	テキストを何回入力させるか数値で設定。デフォルトは`Infinity`(永遠に)	`Infinity` 数値
shuffle	Boolean値でテキストを入力する前にシャッフルし、ランダムにテキスト入力します。デフォルトは`false`	`true` `false`
initial-action	最初の入力テキストに対するアクションを設定します。デフォルトは`typing`(入力から)	`typing` `erasing`
pre-type-delay	入力前の待機時間を数値で設定します。デフォルトは`70`	数値
type-delay	次の文字を入力するまでの時間を数値で設定します。デフォルトは`70`	数値
pre-erase-delay	文字列が完全に入力されたあとの消去アクションまでの待機時間を数値で設定します。デフォルトは`2000` ※消去アクションとは、テキストの選択ハイライトなどのこと	数値
erase-delay	消去アクション後、実際に消去されるまでの待機時間を数値で設定します。デフォルトは`250`	数値
erase-style	消去アクションのスタイルを設定します。デフォルトは`select-all`(全選択)	`backspace` `select-back` `select-all` `clear`
erase-on-complete	Boolean値で最後に入力されたテキスト消去を設定。デフォルトは`false` ※`repeat === Infinity`の場合効果はない	`true` `false`
caret-animation	カーソルのアニメーションを設定します。デフォルトは`blink`	`solid` `blink` `smooth` `phase` `expand`

CSS(スタイル)調整

GitHubのReadme Stylesの項目にSCSSが載っているのでそこを参考にカーソル等の色やアニメーションの調整が可能。

イベントの取得

デフォルトでいくつかのイベントが用意されている。※近日中に追記
詳しくはGitHubのReadme Events の項目参照

ポートフォリオで使おうと思ったVueTyperについて