vue实现ai逐字输出

实现思路

通过Vue的响应式数据和定时器，结合字符串分割与逐字拼接，模拟AI逐字输出的效果。核心是利用setInterval逐步更新显示文本，并通过v-text或{{}}绑定到模板。

基础实现代码

<template>
  <div>
    <p>{{ displayedText }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fullText: "这里是需要逐字输出的AI回答内容",
      displayedText: "",
      currentIndex: 0,
      typingSpeed: 100 // 控制输出速度（毫秒）
    };
  },
  mounted() {
    this.startTyping();
  },
  methods: {
    startTyping() {
      const timer = setInterval(() => {
        if (this.currentIndex < this.fullText.length) {
          this.displayedText += this.fullText.charAt(this.currentIndex);
          this.currentIndex++;
        } else {
          clearInterval(timer);
        }
      }, this.typingSpeed);
    }
  }
};
</script>

进阶优化版本

添加光标动画和中断逻辑，提升交互体验：

<template>
  <div>
    <p>
      {{ displayedText }}
      <span class="cursor" :class="{ blinking: isTyping }">|</span>
    </p>
    <button @click="stopTyping">停止输出</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fullText: "进阶版：支持中断的逐字输出效果",
      displayedText: "",
      currentIndex: 0,
      typingSpeed: 80,
      isTyping: false,
      timer: null
    };
  },
  mounted() {
    this.startTyping();
  },
  methods: {
    startTyping() {
      this.isTyping = true;
      this.timer = setInterval(() => {
        if (this.currentIndex < this.fullText.length) {
          this.displayedText += this.fullText.charAt(this.currentIndex);
          this.currentIndex++;
        } else {
          this.stopTyping();
        }
      }, this.typingSpeed);
    },
    stopTyping() {
      clearInterval(this.timer);
      this.isTyping = false;
    }
  }
};
</script>

<style>
.cursor {
  color: #42b983;
  font-weight: bold;
}
.blinking {
  animation: blink 1s infinite;
}
@keyframes blink {
  0% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}
</style>

动态内容处理

通过watch监听外部传入的内容变化，实现动态响应：

props: {
  aiResponse: {
    type: String,
    required: true
  }
},
watch: {
  aiResponse(newVal) {
    this.fullText = newVal;
    this.displayedText = "";
    this.currentIndex = 0;
    this.stopTyping();
    this.startTyping();
  }
}

性能注意事项

1. 组件销毁前清除定时器

   beforeDestroy() {
   clearInterval(this.timer);
   }

2. 长文本分段处理避免界面卡顿
3. 使用requestAnimationFrame替代setInterval可获得更平滑的动画效果