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.mzph.cn/news/773288.shtml

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