使用 Vue 3 实现打字机效果

在现代前端开发中,添加一些视觉效果可以提升用户体验。其中,打字机效果是一种常见且吸引人的效果,可以用于展示动态文本。本文将介绍如何在 Vue 3 中实现打字机效果。

实现步骤

1. 创建自定义指令

我们首先创建一个自定义指令 v-typewriter,用于实现打字机效果。这个指令将逐字显示绑定的文本内容。

const typeWriter = ref(null);const typewriterDirective = (el, binding) => {const indexValue = el.getAttribute('data-index');const delay = 150; // 设置延迟时间,默认150mslet i = 0;typeWriter.value = setInterval(() => {if (binding?.value && i < binding.value.length) {if (textList.value && textList.value[indexValue]) {textList.value[indexValue].typewriterText += binding.value.charAt(i) || '';}i++;} else {clearInterval(typeWriter.value);stop(textList.value[indexValue], indexValue, true);}}, delay);
};const vTypewriter = {mounted(el, binding) {typewriterDirective(el, binding);}
};

2. 使用自定义指令

在 Vue 组件中使用自定义指令 v-typewriter。该指令会在元素挂载时自动触发,逐字显示文本内容。

<template><div class="left-content mr-16"><el-scrollbar ref="scrollRef" height="100%" class="scroll"><div class="flex mb-48" v-for="(item, index) in textList" :key="item.updateKey"><div class="user-avatar"><img v-if="item.resultTts || item.library" src="/img/avatar.png" alt="" /><img v-else src="/img/user_avatar.png" alt="" /></div><div class="ml-12"><div class="time mb-11"><span v-if="item.resultTts || item.library">智能馆员{{ item.time }}</span><span v-else>读者{{ item.time }}</span></div><div><divclass="answer":class="item.resultTts || item.library ? 'libarary-bg' : 'user-color '"><div v-if="item.resultTts || item.library"><van-loading v-if="!item.resultMessage" type="spinner" color="#1989fa" /><div v-if="item.isStop && item.stopText">{{ item.stopText }}</div><divv-if="item.resultTts && !item.isStop"v-typewriter="item.resultTts":data-index="index">{{ item.typewriterText }}</div></div><div v-else>{{ item.resultMessage }}</div></div><divv-if="(!item.isStop && item.resultTts) || !item.resultMessage"class="stop-icon mt-18"@click="stop(item, index)">停止生成</div></div><BookListv-if="item.dataList?.length && item.isStop":data-list="item.dataList"></BookList></div></div></el-scrollbar></div>
</template><script>
import { ref } from 'vue';
import { useEventBus } from '@/hooks/useEventBus';const emits = defineEmits(['watchTypeWriter', 'handleStop']);const textList = ref([]);
useEventBus('clearChatInfo', () => {textList.value = [];
});
useEventBus('changeAction', (message) => {
// message其它组件传递的数据 clearInterval(typeWriter.value);if (!textList.value.length || !message.resultTts) {textList.value.push({time: ` ${dayjs().format('HH:mm:ss')}`,isStop: false,  // 是否停止stopText: '',   // 打字机停止后的内容typewriterText: '',  // 动态展示打字机内容的文本updateKey: dayjs().valueOf(), // 每次增加一条数据的唯一key...message});return;}if (textList.value.length && message.resultTts) {textList.value[textList.value.length - 1] = {...textList.value[textList.value.length - 1],...message};}
});const stop = (item, index, isFinish = false) => {if (!item.resultMessage) {item.isStop = true;emits('handleStop');return;}if (item.isStop) {return;}const curText = document.querySelector(`[data-index="${index}"]`);item.isStop = true;item.stopText = curText?.innerText;
};
</script><style scoped lang="scss">
/* 自定义样式*/
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/43943.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

SVN 标签的使用与优势

SVN 标签的使用与优势 1. 引言 在软件开发过程中,版本控制是一个至关重要的环节。它帮助开发团队跟踪代码的变化,协作开发,并管理项目的不同版本。Subversion(SVN)作为一种流行的版本控制系统,提供了强大的标签功能,以支持软件开发的不同阶段。本文将详细介绍SVN标签的…

web 网络安全

Web网络安全是网络安全的一个重要分支&#xff0c;专注于保护Web应用程序、服务和网站免受各种网络威胁。学习Web网络安全涉及多个层面的知识和技能&#xff0c;以下是一些主要的学习领域&#xff1a; 一、XSS攻击 全称:&#xff1a;Cross Site Script &#xff08;跨站脚本&a…

从零手写实现 nginx-25-directive map 条件判断指令

前言 大家好&#xff0c;我是老马。很高兴遇到你。 我们为 java 开发者实现了 java 版本的 nginx https://github.com/houbb/nginx4j 如果你想知道 servlet 如何处理的&#xff0c;可以参考我的另一个项目&#xff1a; 手写从零实现简易版 tomcat minicat 手写 nginx 系列 …

在vue3中,手写父子关联,勾选子级父级关联,取消只取消当前子级,父节点不动

树形控件选择子级勾选父级&#xff0c;以及所有子级&#xff0c; 取消勾选仅取消子级 在项目中&#xff0c;可能会遇到这种场景&#xff0c;比如权限配置的时候&#xff0c;页面权限和菜单权限以tree的形式来配置&#xff0c;而且不用半选&#xff0c;菜单在页面的下面&#xf…

FTP与TFTP

1、TFTP&#xff08;简单文件传输协议&#xff09; TFTP是TCP/IP协议族中一个用来在客户机与服务器之间进行简单文件传输的协议&#xff0c;提供不复杂、开销不大的文件传输服务。 基于UDP协议 端口号&#xff1a;69 特点&#xff1a;简单、轻量级、易于实现 传输过程&…

人与机器的协同是强弱系统的互补行为

人与机器的协同可以被视作强弱系统的互补行为&#xff0c;这也强调了人类和机器之间在处理问题、执行任务或创造价值时各自的优势与角色。 人类在认知、创造力、情感和伦理等方面具有独特优势。我们能够进行高级的抽象思维、创新和复杂决策&#xff0c;能够处理不确定性和动态环…

《Windows API每日一练》9.13资源-鼠标位图和字符串

鼠标指针位图&#xff08;Mouse Cursor Bitmap&#xff09;是用于表示鼠标指针外观的图像。在 Windows 窗口编程中&#xff0c;可以使用自定义的鼠标指针位图来改变鼠标的外观&#xff0c;并提供更加个性化的用户体验。 ■以下是一些与鼠标指针位图相关的要点&#xff1a; ●…

量产工具一一业务系统(六)

目录 前言 一、代码流程框架 1.业务系统程序流程图 2.业务系统主页面流程图 3.main.c 4.main_page.c 二、处理配置文件 1.配置文件示例 2.处理配置文件 3.config.h 4.config.c 三、生成产品界面 1.计算每个按钮的范围 2.main_page.c 四、处理输入事件 1.main_…

【力扣C语言】每日一题—第121题,买卖股票的最佳时机

题目&#xff1a; 返回获取的最大利润&#xff1a; 这题可浪费时间了&#xff01;&#xff01;&#xff01; 主要是暴力求解超时&#xff01;&#xff01;&#xff01; 最后参考了一下答案 解题思路&#xff1a; 思路一&#xff1a; 暴力求解&#xff1a;两重for循环判断…

【Python实战因果推断】18_线性回归的不合理效果8

目录 Saturated Regression Model Regression as Variance Weighted Average Saturated Regression Model 还记得我在本章开头强调回归和条件平均值之间的相似性吗&#xff1f;我向你展示了使用二元干预进行回归与比较干预组和对照组的平均值是完全一样的。现在&#xff0c;由…

opencv--把cv::Mat数据转为二进制数据的保存和读取

保存 #include <opencv2/opencv.hpp> #include <iostream> #include <fstream>void saveMatToBinary(const cv::Mat& mat, const std::string& filename) {std::ofstream ofs(filename, std::ios::binary);if (!ofs.is_open()) {std::cerr <<…

Python | Leetcode Python题解之第225题用队列实现栈

题目&#xff1a; 题解&#xff1a; class MyStack:def __init__(self):"""Initialize your data structure here."""self.queue collections.deque()def push(self, x: int) -> None:"""Push element x onto stack."&…

LabVIEW机器视觉技术在产品质量检测中有哪些应用实例

LabVIEW的机器视觉技术在产品质量检测中有广泛的应用&#xff0c;通过图像采集、处理和分析&#xff0c;实现对产品缺陷的自动检测、尺寸测量和定位校准&#xff0c;提高生产效率和产品质量。 1. 电子元器件质量检测 在电子制造业中&#xff0c;电子元器件的质量检测是确保产品…

【基于深度学习方法的激光雷达点云配准系列之GeoTransformer】——粗配准

【GeoTransformer系列】——粗配准 1.coarse_matching1.1 概要1.2 功能1.3 超参1.4 input1.5 output2 coarse_target2.1 概要2.2 功能2.3 input2.4 output在模型部分有了初步了解之后, 接下来我们对后续的粗配准、精配准等部分依次进行解读. 本篇主要来看粗配准部分, 代码是在G…

websocket推送消息,模拟推送

上一篇文章&#xff1a;什么是webSocket&#xff1f;以及它的一些相关理论知识 背景&#xff1a; MQTT 的发布/订阅模式与 WebSocket 的双向通信特性相结合。 通过将 MQTT 与 WebSocket 结合使用&#xff0c;可以在 Web 应用中实现高效、实时的消息传输&#xff0c;特别适用于…

算法练习第29天|1005.K次取反后最大化的数组和

1005. K 次取反后最大化的数组和 - 力扣&#xff08;LeetCode&#xff09; 1.题目描述 给你一个整数数组 nums 和一个整数 k &#xff0c;按以下方法修改该数组&#xff1a; 选择某个下标 i 并将 nums[i] 替换为 -nums[i] 。 重复这个过程恰好 k 次。可以多次选择同一个下…

24/7/10总结

flex布局 父项常见属性 justify-content:设置主轴上的子元素排列方式 flex-wrap:设置子元素是否换行 align-items:设置侧轴上的子元素的排列方式&#xff08;单行&#xff09; 拉伸要把子盒子里的高度给去掉 如果两个align-items都是center并且主轴是y轴就是这种效果…

Java | Leetcode Java题解之第225题用队列实现栈

题目&#xff1a; 题解&#xff1a; class MyStack {Queue<Integer> queue;/** Initialize your data structure here. */public MyStack() {queue new LinkedList<Integer>();}/** Push element x onto stack. */public void push(int x) {int n queue.size();…

操作系统:信号究竟是什么?如何产生?

OS信号 一、信号的概念二、信号的产生1&#xff09;终端按键产生信号1、 前台进程、后台进程2、验证终端按键是否产生信号 2&#xff09;调用系统函数向进程发信号3&#xff09;硬件异常产生信号1、浮点数溢出&#xff0c;CPU产生信号2 浮点数溢出&#xff0c;产生信号原理3. 空…

Mysql-内置函数

一.什么是函数&#xff1f; 函数是指一段可以直接被另外一段程序调用的程序或代码。 mysql内置了很多的函数,我们只需要调用即可。 二.字符串函数 MySQL中内置了很多字符串函数: 三.根据需求完成以下SQL编写 由于业务需求变更,企业员工的工号,统一为5位数,目前不足5位数的全…