Vue前端文字效果:如何让一段文本像是手动一个一个字打出来的

效果展示

自己做的AI聊天机器人界面,我觉得比微信还好看

由于这个前端略微复杂,下文用最简单的例子来展示:
在这里插入图片描述

分析需求

对于AI聊天工具的前端,如果AI生成的文本像是一个一个字打出来的,就会让AI看起来更像真的人,可以大幅度提高用户对AI的亲近感。
深入分析该需求,其实就是前端的文本不一次性显示,而是按一定速率逐字显示。

具体做法

需要两个变量,字符串A是实际显示在前端的字符串,另一个字符串B用于保存后端发送来的完整文本,前端控件绑定字符串A,定时从字符串B中取出下一个字符增加到字符串A上即可。

前端很简单

<p class="text">{{ stringA }}</p>
<button @click="print"><p class="text">点击开启动态效果</p></button>

后端用setTimeout和递归函数结合

import { ref } from 'vue';
const stringA = ref('');
const stringB = ref('');
stringB.value = '苏子曰:“客亦知夫水与月乎?逝者如斯,而未尝往也;盈虚者如彼,而卒莫消长也。盖将自其变者而观之,则天地曾不能以一瞬;自其不变者而观之,则物与我皆无尽也,而又何羡乎!且夫天地之间,物各有主,苟非吾之所有,虽一毫而莫取。惟江上之清风,与山间之明月,耳得之而为声,目遇之而成色,取之无禁,用之不竭,是造物者之无尽藏也,而吾与子之所共适。”';
function print() {console.log(stringA.value.length, stringB.value.length);if (stringA.value.length >= stringB.value.length) {// 退出递归return;} else {// stringA仍然比stringB短,进入下一次等待和递归setTimeout(()=>{stringA.value += stringB.value.charAt(stringA.value.length);print(stringA, stringB);}, 50);}
}

完整代码

<script setup>
import { ref } from 'vue';
const stringA = ref('');
const stringB = ref('');
stringB.value = '苏子曰:“客亦知夫水与月乎?逝者如斯,而未尝往也;盈虚者如彼,而卒莫消长也。盖将自其变者而观之,则天地曾不能以一瞬;自其不变者而观之,则物与我皆无尽也,而又何羡乎!且夫天地之间,物各有主,苟非吾之所有,虽一毫而莫取。惟江上之清风,与山间之明月,耳得之而为声,目遇之而成色,取之无禁,用之不竭,是造物者之无尽藏也,而吾与子之所共适。”';
function print() {console.log(stringA.value.length, stringB.value.length);if (stringA.value.length >= stringB.value.length) {// 退出递归return;} else {// stringA仍然比stringB短,进入下一次等待和递归setTimeout(()=>{stringA.value += stringB.value.charAt(stringA.value.length);print(stringA, stringB);}, 50);}
}
</script><template><main><p class="text">{{ stringA }}</p><button @click="print"><p class="text">点击开启动态效果</p></button></main>
</template><style scoped>.text {font-size: 30px;}
</style>

以上代码效果展示:

前端文字显示动态效果简易版

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

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

相关文章

Python: 你所不知道的星号 * 用法

以下内容为本人的学习笔记&#xff0c;如需要转载&#xff0c;请声明原文链接 微信公众号「ENG八戒」https://mp.weixin.qq.com/s/FHyosiG_tegF5NRUEs7UdA 本文大概 1152 个字&#xff0c;阅读需花 6 分钟 内容不多&#xff0c;但也花了一些精力 如有余力&#xff0c;欢迎点赞…

MySQL主从复制案例实现

使用Sharding-JDBC实现读写分离&#xff1a; 1、导入maven坐标 2、 在配置文件中配置读写分离规则 3、在配置文件中配置允许bean定义覆盖配置项 1、导入maven坐标 <dependency><groupId>org.apache.shardingsphere</groupId><artifactId>sharding-jd…

SoapUI 怎么下载:实用指南

SoapUI Windows 版本下载 今天带大家过一遍 SoapUI 在 Windows 系统下的安装教程吧&#xff01;各位 开发小伙伴 们可以跟着我一起来~ 下载安装包 下载链接&#xff1a;www.soapui.org/downloads/s… 安装 安装非常简单&#xff0c;只需双击它即可启动&#xff0c;安装程序…

【node】Error message “error:0308010C:digital envelope routines::unsupported“

Error: error:0308010C:digital envelope routines::unsupported 版本 【nvm】node版本升降版本 错误 LuckyLucky MINGW64 /e/_DockerDesktop/strong/strong-data (master) $ npm run serve> smallwei/strong-data2.0.1 serve > vue-cli-service serveBrowserslist: …

AWS(三):如何在AwsManagedAd目录和windowsAD实例之间建立双向信任。

前提&#xff1a; 1.创建好了一个AWS managed AD目录&#xff0c;我的目录域名为:aws.managed.com 2.创建好了一个windows AD实例并提升了为域控服务器,实例域名为:aws2.com 看过我AWS 一和二的应该都会创建windows实例了&#xff0c;切记不能将其无缝加入到aws managed AD的…

gitlab 仓库创建及使用

git的工作环境 工作区 暂存区 git add * 版本库 git commit -m “版本描述信息” HEAD 版本号 版本日志git clone gitIP地址:/自建的目录/自建的库/ #克隆到本地 git add . #存储到暂存区 git commit -m "描述信息" #更新版本 git push origin master …

Springboot通过profiles切换不同环境使用的配置

文章目录 简介1.通过分隔符隔离2.通过使用不同的配置文件区分3.测试 简介 一个项目从开发到上线一般要经过几个环境, dev测试环境-uat预生产环境-prod生产环境&#xff0c;每个环境的使用的数据库或者配置不同&#xff0c;这时候可以通过下面两种方式区分配置,达到快速切换的效…

Linux引导和服务

目录 一、Linux引导 1、Linux开机启动的完整过程&#xff1a; 2、bios的作用&#xff1a; 3、boot&#xff1a; 例题&#xff1a;可以将内核文件放在何处&#xff1f; 4、mbr&#xff1a; 5、grub&#xff1a; 6、加载内核文件&#xff1a;就是把内核运行在内存中 7、启…

密码学:带密钥的消息摘要算法一数字签名算法

文章目录 前言手写签名和数字签名前置知识点&#xff1a;消息摘要算法数字签名算法数字签名算法的由来数字签名算法在实际运用的过程附加&#xff1a;签名和摘要值的解释 数字签名算法的家谱数字签名算法的消息传递模型经典数字签名算法-RSA实现 数字签名标准算法-DSA实现 圆曲…

Grafana UI 入门使用

最近项目上需要使用Grafana来做chart&#xff0c;因为server不是我在搭建&#xff0c;所以就不介绍怎么搭建grafana server&#xff0c;而是谈下怎么在UI上具体操作使用了。 DOCs 首先呢&#xff0c;贴一下官网doc的连接&#xff0c;方便查询 Grafana open source documenta…

大数据StarRocks(三) StarRocks数据表设计

1. 列式存储 1.1 列式存储方式有以下几个优点&#xff1a; 1.快速的数据查询 由于数据是按照列进行存储的&#xff0c;所以查询某个列时只需要读取该列所在的块&#xff0c;而不是整行数据&#xff0c;从而大大提高了查询效率。 2.压缩效率高 由于列式存储的数据块中只有一…

C#播放音频文件

要在代码中访问运行目录下的 Resources\audio 文件夹中的 MP3 文件&#xff0c;您需要构建文件的相对路径或绝对路径。由于您的 MP3 文件位于运行目录下&#xff0c;使用相对路径是一个简单且常见的方法。 这里有几个步骤需要注意&#xff1a; 正确的路径&#xff1a;确保您的…

在docekr中运行openwrt镜像

1镜像下载 地址&#xff1a; https://archive.openwrt.org/releases/23.05.1/targets/x86/64/ #linux 下下载命令为 wget https://archive.openwrt.org/releases/23.05.1/targets/x86/64/openwrt-23.05.1-x86-64-rootfs.tar.gz ./#加载镜像 docker import openwrt-23.05.1-x…

计算机毕业设计——基于SSM+Layui的图书管理系统(附源码)

1&#xff0c;项目背景 国家大力推进信息化建设的大背景下&#xff0c;城市网络基础设施和信息化应用水平得到了极大的提高和提高。特别是在经济发达的沿海地区&#xff0c;商业和服务业也比较发达&#xff0c;公众接受新事物的能力和消费水平也比较高。开展商贸流通产业的信息…

HTML5-简单文件操作

文件操作 简介 概念&#xff1a;可以通过file类型的input控件或者拖放的方式选择文件进行操作 语法格式&#xff1a; <input type"file" multiple>属性 multiple&#xff1a;表示是否选择多个文件 accept&#xff1a;用于设置文件的过滤类型&#xff08;MI…

java判断两个List是否存在相同元素

java判断两个List是否存在相同元素 package cn.包名.路径.demo;import cn.hutool.core.collection.CollUtil; import cn.hutool.core.convert.Convert; import cn.hutool.core.util.StrUtil;import java.util.ArrayList; import java.util.List; import java.util.Map; import …

ThreadLocal线程重用导致用户信息错乱的 Bug

在生产上遇到一个诡异的问题&#xff0c;有时获取到的用户信息是别人的。查看代码后&#xff0c;我发现他使用了 ThreadLocal 来缓存获取到的用户信息。 我们知道&#xff0c;ThreadLocal 适用于变量在线程间隔离&#xff0c;而在方法或类间共享的场景。如果用户信息的获取比较…

AI:106-基于卷积神经网络的遥感图像地物分类

🚀点击这里跳转到本专栏,可查阅专栏顶置最新的指南宝典~ 🎉🎊🎉 你的技术旅程将在这里启航! 从基础到实践,深入学习。无论你是初学者还是经验丰富的老手,对于本专栏案例和项目实践都有参考学习意义。 ✨✨✨ 每一个案例都附带有在本地跑过的关键代码,详细讲解供…

Linux22.04系统安装显卡驱动,cuda,cudnn流程

1. 安装显卡驱动 ubuntu-drivers deices显示所有适配显卡的驱动型号&#xff0c;recommended为推荐安装 安装 sudo apt install nvidia-driver-440重启 sudo reboot验证 nvidia-smi2. 安装cuda 在 CUDA Toolkit 的下载页面选择系统版本和安装方式&#xff0c;下载并运行…

[Flutter]WindowsOS上运行遇到的问题总结

[Flutter]WindowsOS上运行遇到的问题总结 写在开头 Flutter项目已能在移动端完美使用后&#xff0c;想看看在桌面端等使用情况 基于Flutter3.0后已支持Windows/MacOS等桌面端&#xff0c;不过具体的系统&#xff0c;还需要看下官方文档解释。 这里抛出文档地址&#xff0c;可…