图示：

核心代码

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