一个假的前端流式输出效果

            <div id="output">
              <img src="require('@/assets/checked.png')" alt="" />
            </div>
          </div>

data中定义的数据  
stageTexts: ['根据您的XXXXXXXXXXXXXXX,'VVV','YYYYYYYYYYYY],
 

async typewriterEffect(text, element, delay = 50) {
      for (let i = 0; i < text.length; i++) {
        element.textContent += text[i];
        await new Promise((resolve) => setTimeout(resolve, delay));
      }
    },

    async enhancedStreamOutput(startIndex = 0) {
      return new Promise((resolve) => {
        this.$nextTick(async () => {
        //确保这个output  元素在
          const outputElement = document.getElementById('output');
          if (startIndex === 0) {
            outputElement.innerHTML = '';
            this.lastStreamImg = null;
          }

          for (let i = startIndex; i < this.stageTexts.length; i++) {
            const container = document.createElement('div');
            container.className = 'stream-line';

            const img = document.createElement('img');
            img.className = 'load-icon';
            img.src = require('@/assets/search/load.gif');

            const p = document.createElement('div');

            container.appendChild(img);
            container.appendChild(p);
            outputElement.appendChild(container);

            await this.typewriterEffect(this.stageTexts[i], p);

            if (i === this.stageTexts.length - 1) {
              this.lastStreamImg = img;
            } else {
              img.src = require('@/assets/checked.png');
              await new Promise((r) => setTimeout(r, 500));
            }
          }
          resolve(); // 流式输出完成时resolve
        });
      });
    },