
Vue3实现打字机效果
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue

·
typeit 介绍
typeit
是一款轻量级打字机特效插件。该打印机特效可以设置打字速度,是否显示光标,是否换行和延迟时间等属性,它可以打印单行文本和多行文本,并具有可缩放、响应式等特点。官方文档
安装
# npm
npm install typeit
# pnpm
pnpm add typeit
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
代码
<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>
阅读全文
AI总结




vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:6 个月前 )
9e887079
[skip ci] 5 个月前
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 8 个月前
更多推荐
相关推荐
查看更多
vue

vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
vue

Vue implementation of Geist
vue

A flexible icon family for Vue
热门开源项目
活动日历
查看更多
直播时间 2025-03-13 18:32:35

全栈自研企业级AI平台:Java核心技术×私有化部署实战
直播时间 2025-03-11 18:35:18

从0到1:Go IoT 开发平台的架构演进与生态蓝图
直播时间 2025-03-05 14:35:37

国产工作流引擎 终结「996」开发困局!
直播时间 2025-02-25 14:38:13

免费开源宝藏 ShopXO,电商系统搭建秘籍大公开!
直播时间 2025-02-18 14:31:04

从数据孤岛到数据智能 - 企业级数据管理利器深度解析
所有评论(0)