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

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 の項目参照