忘れないように記録しとこ

カバの樹

タイピングのようなテキストアニメーションを「VueTyper」で実装する

完全版を表示する

VueTyperとは

VueTyperは、タイピングをしてるかのようにテキストを表示するVue.js用のコンポーネントライブラリです。

リピート回数やディレイ時間などを自由に設定することが可能です。

 

 

環境

Vue 2.6.10
vue-typer 1.2.0

 

インストール

以下のnpm、CDNを使ってインストールします。

npm

npm install --save vue-typer

CDN

<script src="https://unpkg.com/vue-typer/dist/vue-typer.min.js"></script>

 

gitリポジトリは以下から取得できます。

https://github.com/cngu/vue-typer

 

導入手順

1. ライブラリの取り込み

（1）ES6等の場合 [注意]モジュール版は未検証です。

import { VueTyper } from 'vue-typer'
// or
const VueTyper = require('vue-typer').VueTyper

（2）CDNの場合

const VueTyper = window.VueTyper.VueTyper

2.メソッドを設定

上記で取得したVueTyperをcomponentsに取り込みます。

new Vue({
  el: '#app',
  components: {
    'vue-typer': VueTyper
  },
  data: {
    text: 'Hello World! I was registered locally!'
  }
});

3. テンプレートを準備

<vue-typer> を設置します。

text プロパティは必須です。
StringもしくはArrayで値を設定します。

 

[注意] サンプルはケバブケースで記載しています。

<div id="app">
  <p><input type="text" v-model="text"></p>
  <vue-typer :text="text"></vue-typer>
</div>

 

サンプル

>>専用ページで確認する

 

プロパティ

コンポーネントには以下のプロパティを設定することが可能です。

[注意]HTMLに記載する場合はケバブケースを使用します。

プロパティ名 設定型 説明
text String || Array [必須]文字列もしくは配列で値を設定します。
repeat Number リピート回数を設定します。0を設定した場合は1回、1を設定した場合は2回動作します。
デフォルト：Infinity
shuffle Boolean text プロパティに設定した配列？の値をランダムで出力します。
デフォルト:false
initialAction String 開始時に空で始まるか、入力された状態で始まるを設定できます。
デフォルト:typing
種類：typing || erasing
preTypeDelay Number 最初の文字を入力する前に待機するミリ秒。
デフォルト:70
typeDelay Number 文字を入力してから次の文字が入力されるまで待機するミリ秒。
デフォルト:70
preEraseDelay Number 文字列が完全に入力された後、最初の消去アクション（バックスペース、ハイライトなど）が実行されるまで待機するミリ秒。
デフォルト:2000
eraseDelay Number 文字列が完全に入力された後、最初の消去アクション（バックスペース、ハイライトなど）が実行されるまで待機するミリ秒。
デフォルト:250
eraseStyle String 文字を消去する際のアクション設定です。
デフォルト:select-all
種類：backspace || select-back || select-all || clearbackspace バックスペースキーをシミュレートして、一度に1文字を消去します。
select-back Shift + LeftArrowをシミュレートして、一度に1文字後方を強調表示し、すべての文字が強調表示されるとすべてを消去します。
select-all Ctrl / Cmd + Aをシミュレートして、すぐにすべての文字を一度に強調表示し、その後すべての文字を消去します。
clearすぐにすべての文字を一度に消去します。入力した文字列は単に消えます。
eraseOnComplete Boolean すべての入力が完了した後、最後に入力した文字列は消去されず、表示されたままになります。
デフォルト:false
caretAnimation String SublimeおよびVS Codeアニメーションと同様に、使用する組み込みキャレットアニメーションを指定します。
デフォルト:blink
種類：solid || blink || smooth || phase || expand

 

さいごに

タイピングをしてるかのようにテキストを表示するVue.js用のコンポーネントライブラリでした。

ポートフォリオとかランディングページとかで使えそうな感じです。
最近自社のホームページリニューアルのディレクターをやってるので、これを試してみようかな？

今日はこの辺でー

 

  • B!