vue 实现打字机效果

打字机效果组件，支持像打字机一样模仿键入文本。支持vue 插值语法和表格等打印

ps: 灵感来着于vue-type-writer 但是 这个组件过于简单 就自己整了一个

一、预览

二、代码

组件：

<template>
  <div :style="{ visibility: visibility }">
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: "vue-text-dot",
  props: {
    // 间隔时间
    interval: { type: Number, default: 75 },
    // 光标 建议有表格的时候不要使用光标 会导致渲染异常
    cursorStr: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      visibility: "hidden", // 
      timer: 0, // 定时器
      initialDom: null, // 记录初始dom
      progress: 0, // 当前文本书写进度
      // writeStatus: "NotStart",// 当前书写状态=> NotStart: 未开始；Processing：书写中；Completed 书写完毕
    };
  },
  mounted() {
    // 拷贝初始所有dom 便于重新开始
    this.initialDom = JSON.parse(JSON.stringify(this.$el.innerHTML));
  },
  methods: {
    // 开始 / 重新开始
    start() {
      this.visibility = "visible";
      this.progress = 0;
      this.$el.innerHTML = "";
      clearInterval(this.timer);
      this.write();
      this.$emit("writeStart");
    },
    // 暂停
    pause() {
      clearInterval(this.timer);
      this.$emit("writePause");
    },
    // 继续
    continueWrite() {
      if(!this.progress || this.progress >= this.initialDom.length){
        return
      }
      clearInterval(this.timer);
      this.write();
      this.$emit("writeContinue");
    },
    // 重置
    reset() {
      this.visibility = "hidden";
      this.progress = 0;
      this.$el.innerHTML = "";
      clearInterval(this.timer);
    },
    // 书写
    write() {
      this.timer = setInterval(() => {
        var current = this.initialDom.substr(this.progress, 1);
        // console.log(current);
        // 跳过 标签渲染
        if (current === "<") {
          this.progress = this.initialDom.indexOf(">", this.progress) + 1;
        } else {
          this.progress++;
        }
        // console.log(this.progress & 1, "this.progress");
        // 如果有光标配置 拼接到最新渲染的地方
        if (this.cursorStr) {
          this.$el.innerHTML =
            this.initialDom.substring(0, this.progress) +
            (this.progress < this.initialDom.length && this.progress & 1
              ? this.cursorStr
              : "");
        } else {
          this.$el.innerHTML = this.initialDom.substring(0, this.progress);
        }
        // 文本书写进度 大于需要书写的总长度 判断为渲染完成
        if (this.progress >= this.initialDom.length) {
          clearInterval(this.timer);
          this.$emit("writeEnd"); // 打字完成后的回调方法
        }
      }, this.interval);
    },
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
};
</script>

父级组件引用

<template>
  <div class="app-container home">
    <div class="body">
      <button type="primary" @click="start">开始 / 重新开始</button>
      <button type="primary" @click="pause">暂停</button>
      <button type="primary" @click="continueWrite">继续</button>
      <button type="primary" @click="reset">重置</button>
      <VueTypewriter
        class="tl"
        ref="typewriter"
        :interval="50"
        cursorStr=""
        @writeEnd="writeEnd"
      >
        <div class="comments">
          <p>const array = [1, 2, 2, 3, 4, 4, 5];</p>
          <p>const uniqueArray = Array.from(new Set(array));</p>
          <p>console.log(uniqueArray);</p>
          <p>{{ message }}</p>
        </div>
        <table>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
            <td>7</td>
            <td>8</td>
            <td>9</td>
            <td>0</td>
          </tr>
        </table>
      </VueTypewriter>
    </div>
  </div>
</template>

<script>
import VueTypewriter from "./vue-typewriter";
export default {
  name: "Demo",
  components: { VueTypewriter },
  data() {
    return {
      message: "测试插值表达式 是否能够正常渲染",
    };
  },
  methods: {
    // 开始
    start() {
      this.$refs.typewriter.start();
    },
    // 暂停
    pause() {
      this.$refs.typewriter.pause();
    },
    // 继续
    continueWrite() {
      this.$refs.typewriter.continueWrite();
    },
    // 重置
    reset() {
      this.$refs.typewriter.reset();
    },
    // 结束回调
    writeEnd() {
      console.log("end");
    },
  },
};
</script>

<style scoped lang="scss">
.home {
  text-align: left;
  .body {
    width: 890px;
    height: 500px;
    padding: 20px;
    border: #b2c92a solid 10px;
    button {
      margin-right: 20px;
      padding: 8px 20px;
    }
    .comments {
      p {
        font-size: 18px;
        color: green;
      }
    }
    table {
      margin: 20px 0;
      border-collapse: collapse;
      td {
        padding: 10px 20px;
        border: 1px solid #ccc;
      }
    }
  }
}
</style>