vue3仿gpt实现文字输出

技术栈：vue3+v-md-editor

实现思路：每隔50ms(可自己调节)截取一个文字显示；到底后，文字继续添加，滚动条保持一直显示在底部；

效果预览：

<div class="markEdit" id="markEdit">
    <v-md-editor
            v-model="originText"
            style=""
            mode="edit"
            left-toolbar=""
            right-toolbar=""
    ></v-md-editor>
</div>

let originText = ref("");
const nav = reactive(["markdown格式", "思维导图"]);
let wenlen = ref(0);
let timer = reactive();
let text = ref(`- 中央红军撤离江西根据地
  
	- 陈毅等领导前往仁凤山地区
	- 被敌人团团围住，陷入困境
  
  - 决定突围
  
	- 突围时间选择半夜
	- 大雨、天黑、视线受限
	- 前进缓慢、困难重重
  
  - 陈毅受伤前行
  
	- 大腿坐骨受重伤
	- 拄拐杖走在队伍前面
	- 动员伤员的演讲
  
  - 陈毅对伤员的慷慨激昂讲话
  
	- 失败不等于革命失败
	- 红军主力会战胜敌人
	- 敌人内部矛盾无法克服
	- 珍重自己和革命事业
	- 失败时英雄的勇气
	- 必有同志替我们报仇
  
  - 伤员的反应
  
	- 热情响应和回应
	- 重新点燃心中的火焰
	- 坚定革命信念和希望
  
  - 最强音的英雄气魄

  - 中央红军撤离江西根据地
  
	- 陈毅等领导前往仁凤山地区
	- 被敌人团团围住，陷入困境
  
  - 决定突围
  
	- 突围时间选择半夜
	- 大雨、天黑、视线受限
	- 前进缓慢、困难重重
  
  - 陈毅受伤前行
  
	- 大腿坐骨受重伤
	- 拄拐杖走在队伍前面
	- 动员伤员的演讲
  
  - 陈毅对伤员的慷慨激昂讲话
  
	- 失败不等于革命失败
	- 红军主力会战胜敌人
	- 敌人内部矛盾无法克服
	- 珍重自己和革命事业
	- 失败时英雄的勇气
	- 必有同志替我们报仇
  
  - 伤员的反应
  
	- 热情响应和回应
	- 重新点燃心中的火焰
	- 坚定革命信念和希望
  
  - 最强音的英雄气魄
  `);
  
  onMounted(() => {
	originText.value = "";
	wenlen.value = 0;
	onLoad();
});

const onLoad = () => {
	let markEditEle = document.getElementById("markEdit");
	let markEdit = markEditEle.offsetHeight;
	let editorEle = document.getElementsByClassName("v-md-editor")[0];
	let offsetH = 0;
	timer = setInterval(() => {
             //截取文字
		originText.value = text.value.substr(0, wenlen.value);
                // 显示的文字长度
		if (wenlen.value < text.value.length) {
                    wenlen.value++;
                    let oh = editorEle.offsetHeight;
                    //滚动条滚动到底部
                    if (oh > markEdit && oh != offsetH) {
                        offsetH = oh;
                        markEditEle.scrollTop = markEditEle.scrollHeight;
			}
		} else {
			clearInterval(timer);
		}
	}, 50);
};