vue 动画加载文字 像打字机那样的

<template>
  <div>
    <div class="typing-text" v-if="showText">{{ currentText }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      textToType: "Hello, World!", // 你想要加载的文字
      currentText: "", // 当前显示的文字
      showText: true // 控制是否显示文字
    };
  },
  methods: {
    typeText() {
      const textArray = this.textToType.split("");
      let index = 0;

      const typingInterval = setInterval(() => {
        this.currentText += textArray[index];
        index++;

        if (index === textArray.length) {
          clearInterval(typingInterval);
          // 在此可以触发加载完成后的操作
        }
      }, 100); // 调整间隔时间
    }
  },
  mounted() {
    this.typeText();
  }
};
</script>

<style>
.typing-text {
  font-size: 24px;
  font-weight: bold;
  display: inline-block;
  border-right: 2px solid; /* 光标效果，可以根据需要调整 */
  animation: cursor-blink 1s infinite; /* 光标闪烁动画，可以根据需要调整 */
}

@keyframes cursor-blink {
  0%, 100% {
    border-color: transparent;
  }
  50% {
    border-color: #000; /* 光标颜色，可以根据需要调整 */
  }
}
</style>