typeit 介绍
typeit
是一款轻量级打字机特效插件。该打印机特效可以设置打字速度,是否显示光标,是否换行和延迟时间等属性,它可以打印单行文本和多行文本,并具有可缩放、响应式等特点。官方文档
安装
npm install typeit
pnpm add typeit
代码
<template>
<span ref="text" class="msg"></span>
</template>
<script setup>
import { ref, onMounted } from "vue";
import TypeIt from 'typeit'
const text = ref(null)
onMounted(() => {
new (TypeIt)(text.value, {
strings: ["你好", "欢迎", "测试测试测试"],
cursorChar: "<span class='cursorChar'>|<span>",
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>
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>",
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>