当前位置：首页 > VUE

vue实现ai逐字输出

2026-01-20 02:31:08VUE

实现思路

在Vue中实现AI逐字输出效果，可以通过定时器逐步显示文本内容。核心逻辑是拆分字符串，按顺序逐个字符添加到显示变量中。

基础实现方法

安装Vue项目后，在组件中定义数据和方法：

data() {
  return {
    fullText: '这里是AI生成的完整文本内容',
    displayedText: '',
    currentIndex: 0
  }
},
methods: {
  typeWriter() {
    if (this.currentIndex < this.fullText.length) {
      this.displayedText += this.fullText.charAt(this.currentIndex)
      this.currentIndex++
      setTimeout(this.typeWriter, 100) // 调整速度
    }
  }
},
mounted() {
  this.typeWriter()
}

模板部分：

<div>{{ displayedText }}</div>

优化版本

增加开始/暂停控制和动画效果：

data() {
  return {
    fullText: '优化后的逐字输出效果',
    displayedText: '',
    currentIndex: 0,
    isTyping: false,
    typingSpeed: 50,
    timer: null
  }
},
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
  },
  resetTyping() {
    this.stopTyping()
    this.displayedText = ''
    this.currentIndex = 0
  }
}

添加光标动画

CSS部分：

.type-cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  background: #000;
  animation: blink 1s infinite;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

模板更新：

<div>
  {{ displayedText }}<span class="type-cursor"></span>
</div>
<button @click="startTyping" :disabled="isTyping">开始</button>
<button @click="stopTyping" :disabled="!isTyping">暂停</button>
<button @click="resetTyping">重置</button>

支持异步获取文本

当文本需要从API获取时：

async fetchAndType() {
  const response = await fetch('api/text-generate')
  this.fullText = await response.text()
  this.resetTyping()
  this.startTyping()
}

性能优化建议

对于长文本内容，建议分块处理避免界面卡顿：

const CHUNK_SIZE = 50

processChunk() {
  const end = Math.min(this.currentIndex + CHUNK_SIZE, this.fullText.length)
  this.displayedText = this.fullText.substring(0, end)
  this.currentIndex = end

  if (this.currentIndex < this.fullText.length) {
    requestAnimationFrame(() => {
      this.processChunk()
    })
  }
}

vue实现ai逐字输出