vue实现文字一个字一个字的显示(开箱即用)

图示:在这里插入图片描述

在这里插入图片描述

核心代码

Vue.prototype.$showHtml = function (str, haveCallback = null) {let timeFlag = ''let abcStr = ''for (let i = 0; i < str.length; i++) {(function (i) {timeFlag = setTimeout(function () {abcStr +=str[i]haveCallback(abcStr)if ((i + 1) == str.length) {clearTimeout(timeFlag)}}, 20 * i);})(i);}}

使用:

let str = 'P1-01堆在2024-03-01  ~  2024-03-14期间</br>1、粮温由<span style="color: #2DAFD6;font-weight: bold">15℃ </span> 上升到<span style="color: #2DAFD6;font-weight: bold">20℃ </span>上升较快,气象温度在<span style="color: #2DAFD6;font-weight: bold">18℃ </span>至<span style="color: #2DAFD6;font-weight: bold">20℃ </span>之间,雨量0mm,可根据实际的作业管理规范及时定制通风作业或启动空调控温以便降温处理。</br>2、虫害由<span style="color: #2DAFD6;font-weight: bold">20头 </span>上升为<span style="color: #2DAFD6;font-weight: bold">50头 </span>上升较快,磷化氢及氮气检测值为0,可根据实际的作业管理规范及时制定熏蒸作业或者气调作业以便进行杀虫处理。'this.$showHtml(str, (e) => {//e就是返回的值this.abcStr=e})

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

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

相关文章

JUC:Monitor 与 Java对象头的内容与锁关系

文章目录 Monitorjava对象头Monitor&#xff08;锁、管程&#xff09; Monitor java对象头 普通对象 Mark Word 主要用来存储对象自身的运行时数据、klass word就是指向该对象的类型。 数组对象 mark word 不同对象状态下结构和含义不同。 Monitor&#xff08;锁、管…

JavaEE 初阶篇-深入了解多线程等待与多线程状态

&#x1f525;博客主页&#xff1a; 【小扳_-CSDN博客】 ❤感谢大家点赞&#x1f44d;收藏⭐评论✍ 文章目录 1.0 线程等待 1.1 线程等待 - join() 方法 1.1.1 main 线程中等待多个线程 1.1.2 main 线程等待 t2 线程且t2 线程等待 t1 线程 1.1.3 其他线程阻塞等待 main 线程 1.…

期货开户要找到适合自己的系统

物有一个生物圈&#xff0c;大鱼吃小鱼&#xff0c;小鱼吃虾。在期货市场这条生物圈里面&#xff0c;大部分人就是期货市场的虾子&#xff0c;是被吃的&#xff0c;所以必须成长起来&#xff0c;往更高一层走&#xff0c;到可以吃虾子的时候&#xff0c;就是挣钱的时候。学习不…

物流监控升级,百递云·API开放平台助力某电商平台实现高效物流管理

不论是电商平台自身还是消费者&#xff0c;都有着对物流监控的强烈需求。 消费者下单后be like: 每十分钟看一次快递轨迹 放心&#xff0c;电商平台也一样关心物流状态&#xff01;怎样第一时间向用户传递物流状态&#xff1f; 怎么减少重复的提问和投诉&#xff1f;怎样监管…

2023年EI会议论文已见刊/检索进展汇总

2023年录用的会议论文已在SPIE、ACM、IEEE等出版社正式上线见刊&#xff0c;并已陆续完成EI Compendex数据库收录&#xff0c;详情如下&#xff1a; EIECT 2023——IEEE出版&#xff0c;并完成EI收录 会议信息&#xff1a; 第三届电子信息工程与计算机技术国际学术会议&…

cesium vue 绘制标记实体(撒点),监听鼠标左击事件

添加实体 const viewer new Cesium.Viewer(cesiumContainer, {})viewer.entities.add()查看实体 const viewer new Cesium.Viewer(cesiumContainer, {}) const billboard viewer.entities.add({...})viewer.zoomTo(billboard)删除实体 根据实体删除 if (billboard.value…

治愈自己的短句,心灵鸡汤!

一、不是所有的是非都能理清&#xff0c;不是所有的付出都有收获。有些选择是无可奈何&#xff0c;有些失去是注定的。与其无法言说&#xff0c;不如一笑而过&#xff1b;与其无法释怀&#xff0c;不如安然自若。 二、没人会真正的感同身受到你的痛楚&#xff0c;也没人会真正…

server端

一、创建项目 expess server 1.1 安装nodemon npm i nodemon 1.2 设置连接数据库mongodb 安装mongoose npm i mongoose 在根目录新建config文件夹/db.config.js // 引入mongodb数据库操作模块 const mongoose require("mongoose") // 连接数据库mongoose.con…

【面试那些事儿】浏览器键入网址到网页显示,期间发生了什么

当用户在浏览器中键入网址并按下回车键后&#xff0c;直到最终显示出完整的网页内容&#xff0c;这一过程中经历了哪些步骤呢&#xff1f; 这是一道经典的面试题&#xff0c;我们来看看具体有哪些阶段。 1. 解析URL 浏览器首先解析用户输入的URL&#xff0c;判断它的语法和协…

FastText 增量训练

1.安装正确版本 &#xff08;1&#xff09;下载IncrementalTraining分支代码GitHub - SergeiAlonichau/fastText at IncrementalTraining&#xff0c;或者下载资源&#xff1b; &#xff08;2&#xff09;将上一步下载的zip进行解压&#xff0c;然后进入文件夹执行make操作即…

Linux 动静态库的制作,使用和加载

Linux 动静态库的制作,使用和加载 一.前置说明1.mylib.h2.mylib.c3.mymath.h mymath.c4.如何制作库 二.动静态库的制作1.静态库的制作1.制作2.使用一下静态库,验证是否成功打包 2.动态库的制作1.编译.c源文件文件生成.o目标文件2.打包生成动态库3.编写makefile文件,自动化制作动…

【问题分析】InputDispatcher无焦点窗口ANR问题【Android 14】

1 问题描述 Monkey跑出的无焦点窗口的ANR问题。 特点&#xff1a; 1&#xff09;、上层WMS有焦点窗口&#xff0c;为Launcher。 2&#xff09;、native层InputDispacher无焦点窗口&#xff0c;上层为”recents_animation_input_consumer“请求了焦点&#xff0c;但是”rece…