Vue3实现打字机效果

typeit 介绍

typeit是一款轻量级打字机特效插件。该打印机特效可以设置打字速度，是否显示光标，是否换行和延迟时间等属性，它可以打印单行文本和多行文本，并具有可缩放、响应式等特点。官方文档

安装

# npm
npm install typeit
# pnpm
pnpm add typeit 

代码

<template><span ref="text" class="msg"></span>
</template><script setup>
// https://www.typeitjs.com/docs/vanilla/usage/#configuration-basics
// npm install typeit
import { ref, onMounted } from "vue";
import TypeIt from 'typeit'
const text = ref(null)
onMounted(() => {new (TypeIt)(text.value, {strings: ["你好", "欢迎", "测试测试测试"],cursorChar: "<span class='cursorChar'>|<span>",//用于光标的字符。HTML也可以speed: 100,lifeLike: true,// 使打字速度不规则cursor: true,//在字符串末尾显示闪烁的光标breakLines: false,// 控制是将多个字符串打印在彼此之上，还是删除这些字符串并相互替换loop: true,//是否循环}).go()
})
</script><style scoped>
.msg {color: rgb(88, 88, 88);letter-spacing: 2px;
}.msg :v-deep(.cursorChar){display: inline-block;margin-left: 2px;
}
</style>    

封装为组件

<template><span ref="text" class="msg"></span>
</template><script setup>
/*** 打字机效果* npm install typeit* https://www.typeitjs.com/docs/vanilla/usage/#configuration-basics*/
import { ref, onMounted } from "vue";
import TypeIt from 'typeit'
const props = defineProps({ strings: { type:Array } })
const text = ref(null)
onMounted(() => {new (TypeIt)(text.value, {strings: props.text,cursorChar: "<span class='cursorChar'>|<span>",//用于光标的字符。HTML也可以speed: 150,lifeLike: true,// 使打字速度不规则cursor: true,//在字符串末尾显示闪烁的光标breakLines: false,// 控制是将多个字符串打印在彼此之上，还是删除这些字符串并相互替换loop: true,//是否循环}).go()
})
</script><style lang='scss' scoped>
.msg {color: var(--el-color-info-light-3);letter-spacing: 2px;:v-deep(.cursorChar) {display: inline-block;margin-left: 2px;}
}
</style>