Vue Type Writer
made with Vuejs

Vue Type Writer是一个Vue.js 2打字机效果组件，支持像打字机一样模仿键入文本。

安装

Npm

npm i vue-type-writer

Yarn

yarn add vue-type-writer

使用

引入

import typewriter from 'vue-type-writer'

使用

<typewriter ref="typewriter" :interval="50">
  <!-- elements that u want to type -->
</typewriter>

示例

template

<template>
  <div>
    <button @click="type">start.</button>
    <typewriter class="tl" ref="typewriter" :interval="50" :style="{visibility: status}">
      <div class="comments">
        <p>/**</p>
        <p><span class="space"></span>*imitate typing</p>
        <p>*/</p>
      </div>
    </typewriter>
  </div>
</template>

JS

import typewriter from 'vue-typewriter'
...
 {
   ...
   components: { typewriter, ... },
   data () {
     return {
       ...
       status: 'hidden'
       ...
     }
   },
   methods: {
     // $emit
     type () {
       this.status = 'visible'
       this.$refs.typewriter.$emit('typewrite')
     }
   }
 }
...