vue-typer | 一款模拟用户输入文字效果的Vue组件

vue-typer是一款模拟用户输入，选择和删除文本等输入效果的vue组件。它可以支持输入再擦除的动画，支持多种文字输入模式，可自定义组件的样式。

vue-typer只有一个依赖项lodash.split，以支持表情符号和其他多代码点Unicode字符。除此之外，vue-typer没有任何直接依赖于任何其他库或框架–甚至没有依赖于Vue本身！

使用方法

安装

如果您想使用vue-typer插件，首先您需要安装它，命令如下：

npm install --save vue-typer
//cdn地址
https://unpkg.com/vue-typer/dist/vue-typer.min.js
		

使用

全局使用

// ES6
import VueTyperPlugin from 'vue-typer'
// CommonJS
var VueTyperPlugin = require('vue-typer').default
// Global
var VueTyperPlugin = window.VueTyper.default
// 作为vue插件
Vue.use(VueTyperPlugin)
		

局部引用

// ES6
import { VueTyper } from 'vue-typer'
// CommonJS
var VueTyper = require('vue-typer').VueTyper
// Global
var VueTyper = window.VueTyper.VueTyper
		

示例代码：

<vue-typer text='Hello World' erase-style='backspace'></vue-typer>	
		

其中，backspace为一次删除一个字符，模拟退格键。

配置参数

Vue-typer的props如下：

• text：输入的文字，可以是字符串或者数组，必须。
• repeat：擦除文字动画的次数，0表示一次，1表示2次，默认值为Infinity。
• shuffle：是否随机擦除。默认值为false。
• initialAction：可选值为"typing"||"erasing"。默认值为typing。
  • "typing"：会在“正在键入”状态下启动VueTyper；当VueTyper开始键入文本中的第一个字符串时，将出现空白。
  • "erasing"：在“擦除”状态下启动VueTyper；当VueTyper开始擦除文本中的第一个字符串时，它将已经被键入并可见。
• preTypeDelay：擦除的时间间隔，单位毫秒，默认值为70。
• typeDelay：擦除的延迟时间，单位毫秒，默认值为70。
• preEraseDelay：在完成一次擦除后进入下一次擦除的延迟时间，单位毫秒，默认值为2000。
• eraseStyle：擦除的方式，可以是"backspace" || "select-back" || "select-all" || "clear"，默认为select-all。
• eraseDelay：擦除的延迟时间，默认为500ms。
• eraseOnComplete：当完成时是否擦除，默认为true。
• caretAnimation：指定要使用的内置插入符号动画，类似于Sublime和VS Code动画。可选值有："solid" || "blink" || "smooth" || "phase" || "expand"。默认值为：blink

事件

Vue-typer的可用事件如下：

• typed：当整个输入完成时触发。
• typed-char：当输入一个字符完成后触发。
• erased：当整个擦除完成时触发。
• completed：当所有文字输入完成 repeat+1 次时触发。

github网址：https://github.com/cngu/vue-typer