vue实现文字一个字一个字的显示（开箱即用）

风掠过有空白

于 2024-03-26 14:17:54 发布

阅读量454

点赞数 1

分类专栏：工作遇到的问题封装组件文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_44056717/article/details/137044886

版权

工作遇到的问题同时被 2 个专栏收录

44 篇文章 0 订阅

订阅专栏

封装组件

17 篇文章 0 订阅

订阅专栏

图示：

在这里插入图片描述

核心代码

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
        })