前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Vue3实现打字机效果

Vue3实现打字机效果

作者头像
超级小的大杯柠檬水
发布2023-05-06 21:06:53
1.5K0
发布2023-05-06 21:06:53
举报
文章被收录于专栏:CYCY

typeit 介绍

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

安装

代码语言:javascript
复制
# npm
npm install typeit
# pnpm
pnpm add typeit 

代码

代码语言:javascript
复制
<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>    

封装为组件

代码语言:javascript
复制
<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>
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2023-05-05,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • typeit 介绍
  • 安装
  • 代码
  • 封装为组件
相关产品与服务
腾讯云服务器利旧
云服务器(Cloud Virtual Machine,CVM)提供安全可靠的弹性计算服务。 您可以实时扩展或缩减计算资源,适应变化的业务需求,并只需按实际使用的资源计费。使用 CVM 可以极大降低您的软硬件采购成本,简化 IT 运维工作。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档