Vue.js 2打字机组件 - vue-typewriter

Vue.js 2打字机组件 - vue-typewriter
插件名称 vue-typewriter
发布时间 2020年12月31日
插件作者 xmflswood

一个vue.js 2组件,它像打字机一样模仿键入文本。

安装

npm install vue-type-writer --save

并在您的组件中:

import typewriter from 'vue-type-writer'

用法

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

演示版

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