什么职位做网站,装修平台哪家好,omv wordpress,益阳学校网站建设效果展示 自己做的AI聊天机器人界面#xff0c;我觉得比微信还好看 由于这个前端略微复杂#xff0c;下文用最简单的例子来展示#xff1a;
分析需求
对于AI聊天工具的前端#xff0c;如果AI生成的文本像是一个一个字打出来的#xff0c;就会让AI看起来更像真的人…效果展示 自己做的AI聊天机器人界面我觉得比微信还好看 由于这个前端略微复杂下文用最简单的例子来展示
分析需求
对于AI聊天工具的前端如果AI生成的文本像是一个一个字打出来的就会让AI看起来更像真的人可以大幅度提高用户对AI的亲近感。 深入分析该需求其实就是前端的文本不一次性显示而是按一定速率逐字显示。
具体做法
需要两个变量字符串A是实际显示在前端的字符串另一个字符串B用于保存后端发送来的完整文本前端控件绑定字符串A定时从字符串B中取出下一个字符增加到字符串A上即可。
前端很简单
p classtext{{ stringA }}/p
button clickprintp classtext点击开启动态效果/p/button后端用setTimeout和递归函数结合
import { ref } from vue;
const stringA ref();
const stringB ref();
stringB.value 苏子曰“客亦知夫水与月乎逝者如斯而未尝往也盈虚者如彼而卒莫消长也。盖将自其变者而观之则天地曾不能以一瞬自其不变者而观之则物与我皆无尽也而又何羡乎!且夫天地之间物各有主,苟非吾之所有虽一毫而莫取。惟江上之清风与山间之明月耳得之而为声目遇之而成色取之无禁用之不竭是造物者之无尽藏也而吾与子之所共适。”;
function print() {console.log(stringA.value.length, stringB.value.length);if (stringA.value.length stringB.value.length) {// 退出递归return;} else {// stringA仍然比stringB短进入下一次等待和递归setTimeout((){stringA.value stringB.value.charAt(stringA.value.length);print(stringA, stringB);}, 50);}
}完整代码
script setup
import { ref } from vue;
const stringA ref();
const stringB ref();
stringB.value 苏子曰“客亦知夫水与月乎逝者如斯而未尝往也盈虚者如彼而卒莫消长也。盖将自其变者而观之则天地曾不能以一瞬自其不变者而观之则物与我皆无尽也而又何羡乎!且夫天地之间物各有主,苟非吾之所有虽一毫而莫取。惟江上之清风与山间之明月耳得之而为声目遇之而成色取之无禁用之不竭是造物者之无尽藏也而吾与子之所共适。”;
function print() {console.log(stringA.value.length, stringB.value.length);if (stringA.value.length stringB.value.length) {// 退出递归return;} else {// stringA仍然比stringB短进入下一次等待和递归setTimeout((){stringA.value stringB.value.charAt(stringA.value.length);print(stringA, stringB);}, 50);}
}
/scripttemplatemainp classtext{{ stringA }}/pbutton clickprintp classtext点击开启动态效果/p/button/main
/templatestyle scoped.text {font-size: 30px;}
/style
以上代码效果展示 前端文字显示动态效果简易版
