vue实现文字打字机效果（纯代码无需引入npm包）

为了实现文字打字机效果，网上找大多数说的是引入 vue-typed-js 插件，折腾了一通没弄太好，没办法，既然没有轮子那就创造轮子。

效果图

图片引用于网络，不想搞动图了 www

实现步骤

废话不多说直接上代码。

1.创建typed.vue组件

代码如下（示例）：

<template>
  <div>
    <div class="typedText">{{ typedText }}</div>
  </div>
</template>

<script>
export default {
  name: "typed",
  props: {
    typedList: [],
    loop: {
      type: Boolean,
      default: true,
    },
    speed: {
      type: Number,
      default: 200,
    },
  },
  data() {
    return {
      typedText: "",
    };
  },
  mounted() {
    this.start();
  },
  methods: {
    start() {
      let j = 0;
      let k = 0;
      this.typedText = "";
      if (this.typedList.length <= 0) {
        console.error("typedList数据缺失");
        return;
      }
      let arr = this.typedList[k].split("");
      let timer = setInterval(() => {
        if (j < arr.length) {
          this.typedText += arr[j++];
        } else {
          if (k < this.typedList.length - 1) {
            k++;
            j = 0;
            this.typedText = "";
            arr = this.typedList[k].split("");
          } else {
            clearInterval(timer);
            if (this.loop) {
              this.start();
            }
          }
        }
      }, this.speed);
    },
  },
};
</script>
<style lang="scss" scoped>
.typedText::after {
  content: "|";
  animation: blink 1s infinite;
}
@keyframes blink {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
</style>

2.引入并使用刚刚创建的组件

代码如下（示例）：

import Typed from "@/components/typed";

  components: {
    Typed,
  },

<Typed :typedList="['测试打字机第一行', '测试第二行']" />

至此，大功告成 hhh