vue实现打字机

Vue 实现打字机效果

使用 CSS 动画实现基础效果

在 Vue 中可以通过 CSS 动画和动态绑定文本内容实现简单的打字机效果。定义一个 CSS 类来控制光标闪烁和文本显示：

.typewriter {
  overflow: hidden;
  border-right: 0.15em solid orange;
  white-space: nowrap;
  margin: 0 auto;
  letter-spacing: 0.15em;
  animation: 
    typing 3.5s steps(40, end),
    blink-caret 0.75s step-end infinite;
}

@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: orange }
}

在 Vue 模板中应用这个样式：

<template>
  <div class="typewriter">{{ displayText }}</div>
</template>

使用 JavaScript 逐字显示

对于更可控的逐字显示效果，可以通过定时器逐步构建字符串：

export default {
  data() {
    return {
      fullText: 'Hello, this is a typewriter effect in Vue!',
      displayText: '',
      charIndex: 0
    }
  },
  mounted() {
    this.typeWriter()
  },
  methods: {
    typeWriter() {
      if (this.charIndex < this.fullText.length) {
        this.displayText += this.fullText.charAt(this.charIndex)
        this.charIndex++
        setTimeout(this.typeWriter, 100)
      }
    }
  }
}

添加删除效果

要实现先打字后删除的循环效果，可以扩展上述方法：

methods: {
  typeWriter() {
    if (this.charIndex < this.fullText.length) {
      this.displayText += this.fullText.charAt(this.charIndex)
      this.charIndex++
      setTimeout(this.typeWriter, 100)
    } else {
      setTimeout(this.deleteText, 1000)
    }
  },
  deleteText() {
    if (this.displayText.length > 0) {
      this.displayText = this.displayText.slice(0, -1)
      setTimeout(this.deleteText, 50)
    } else {
      this.charIndex = 0
      setTimeout(this.typeWriter, 500)
    }
  }
}

使用第三方库

对于更复杂的效果，可以考虑使用专门的字幕动画库如 typeit：

import TypeIt from 'typeit'

export default {
  mounted() {
    new TypeIt('#typewriter', {
      strings: ['First sentence', 'Second sentence'],
      speed: 100,
      breakLines: false,
      loop: true
    }).go()
  }
}

响应式文本更新

当需要动态更改显示文本时，使用计算属性或监视器：

watch: {
  fullText(newVal) {
    this.displayText = ''
    this.charIndex = 0
    this.typeWriter()
  }
}

这些方法提供了从简单到高级的打字机效果实现方案，可以根据具体需求选择合适的方式。CSS 动画适合静态文本，JavaScript 方案提供更多控制，而第三方库则能快速实现复杂效果。