当前位置：首页 > VUE

vue实现文字动态输出

2026-02-21 09:02:53VUE

Vue 实现文字动态输出

在 Vue 中实现文字动态输出（类似打字机效果）可以通过多种方式实现，以下是几种常见的方法：

使用定时器和字符串截取

通过定时器逐步截取字符串并更新显示内容，实现动态输出效果。

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

<script>
export default {
  data() {
    return {
      fullText: '这是要动态输出的文字内容',
      displayedText: '',
      index: 0
    }
  },
  mounted() {
    this.typeWriter()
  },
  methods: {
    typeWriter() {
      if (this.index < this.fullText.length) {
        this.displayedText += this.fullText.charAt(this.index)
        this.index++
        setTimeout(this.typeWriter, 100) // 调整延迟时间控制输出速度
      }
    }
  }
}
</script>

使用 CSS 动画实现

通过 CSS 动画和计算属性实现类似效果，这种方法更简洁但灵活性稍低。

<template>
  <div class="typing-text">{{ text }}</div>
</template>

<script>
export default {
  data() {
    return {
      text: '动态输出的文字内容'
    }
  }
}
</script>

<style>
.typing-text {
  width: fit-content;
  overflow: hidden;
  white-space: nowrap;
  animation: typing 3s steps(30, end);
}

@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}
</style>

使用第三方库

对于更复杂的效果，可以考虑使用专门的打字机效果库，如 vue-typed-js。

安装依赖：

npm install vue-typed-js

使用示例：

<template>
  <typed :strings="['第一段文字', '第二段文字']" :loop="true"></typed>
</template>

<script>
import { VueTypedJs } from 'vue-typed-js'

export default {
  components: {
    typed: VueTypedJs
  }
}
</script>

添加光标效果

为打字机效果添加闪烁光标，增强视觉效果。

<template>
  <div class="typing-container">
    <span>{{ displayedText }}</span>
    <span class="cursor">|</span>
  </div>
</template>

<style>
.cursor {
  animation: blink 1s infinite;
}

@keyframes blink {
  0%, 100% { opacity: 1 }
  50% { opacity: 0 }
}
</style>

支持多行输出

如果需要支持多行文本的动态输出，可以稍作修改：

methods: {
  typeWriter() {
    const lines = this.fullText.split('\n')
    if (this.lineIndex < lines.length) {
      const currentLine = lines[this.lineIndex]
      if (this.charIndex < currentLine.length) {
        this.displayedText += currentLine.charAt(this.charIndex)
        this.charIndex++
      } else {
        this.displayedText += '\n'
        this.lineIndex++
        this.charIndex = 0
      }
      setTimeout(this.typeWriter, 100)
    }
  }
}

以上方法可以根据具体需求选择或组合使用，实现不同风格的文字动态输出效果。

vue实现文字动态输出