VueTyperを実装

Vue.jsで実装した機能を備忘録として記録する。

VueTyperとは

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

前提条件

・Vue-CLIをインストールしていること
※CDNでも実装可能ですが、今回はVue-CLIを使用して進めています。

インストール

npm install --save vue-typer

ライブラリの読み込み

js

import { VueTyper } from 'vue-typer'

コンポーネントに取り込み

js

export default {
  components: {
    VueTyper
  }
}

テンプレートに記述

template

<template>
 <div>
   <vue-typer :pre-type-delay='1500' :type-delay='100' :repeat='0' text="表示させたい文字を入力">
</vue-typer>
</div>
</template>

デモページ

下記ページで動きを確認することができます。
https://cngu.github.io/vue-typer/