vue中使用vue-typed-js

官网

Installation

npm install --save vue-typed-js

Default import

import Vue from 'vue'
import VueTypedJs from 'vue-typed-js'

Vue.use(VueTypedJs)

Usage

<template>
  <div class="box">
    <header>
      <template v-if="lineTexts.length > 0">
        <vue-typed-js
          :strings="lineTexts"
          :loop="true"
          :startDelay="300"
          :typeSpeed="100"
          :backSpeed="50"
        >
          <span class="typing"></span>
        </vue-typed-js>
      </template>
    </header>
</template>

<script>
const jinrishici = require("jinrishici");
export default {
  data() {
    return {
      lineTexts: [],
    };
  },
  beforeMount() {
    jinrishici.load(
      (result) => {
        this.lineTexts = result.data.origin.content;
      },
      (err) => {
        console.error(err);
      }
    );
  },
};
</script>

v-if  是为了防止 lineTexts  值为空也传给 vue-typed-js 组件，哪样的话会报一下错误：

 好了，谢谢大家的观看！