展示

个人blog，还在编写中，欢迎访问留言⭐

Vinc的个人博客

前言

分享项目中使用过的打字机效果及实现方法（狗头保命）

大约在某冬天，产品经理过来说我要文字出现打字机的效果，所以下面的方法就是实现打字机的效果。

1.创建div

<div class="box" v-show="showBox">
  <h1 ref="title"></h1>
  <span ref="describe"></span>
</div>
<button @click.stop="change()">btn</button>

2.引入ityped

//只需要按需引用到init即可
import { init } from "ityped";

3.写一个方法实现切换或者在mounted使用几秒后页面加载也可以

change() {
      this.showBox = !this.showBox;
      init(this.$refs.title, {
        strings: ["大家好我是Vinc"],
        //optional
        typeSpeed: 50, //default
        //optional
        backSpeed: 30, //default
        //optional
        startDelay: 1000, //default
        //optional
        backDelay: 500000, //default
        //optional
        loop: false, //default
        //optional
        showCursor: true, //default
        cursorChar: "",
        //optional
        // optional callback called once the last string has been typed
      });

      init(this.$refs.describe, {
        strings: ["我是一名程序员，今天给大家分享一下之前项目中遇到的打字机文字效果所需要实现的方法"],
        //optional
        typeSpeed: 60, //default
        //optional
        backSpeed: 30, //default
        //optional
        startDelay: 2000, //default
        //optional
        backDelay: 500000, //default
        //optional
        loop: false, //default
        //optional
        showCursor: true, //default
        cursorChar: "",
      });
    },

我是Vinc，创作不易，感谢大家观看并且尝试，希望能帮到大家，附赠璐璐美照一张