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 方案提供更多控制，而第三方库则能快速实现复杂效果。
