第一种
前提是类似于这样的数据对象结构
{
content: '这里是返回你的回答结果',
displayText: '这里是返回你的回答结果'
},
用一个函数
// 打字效果函数
const displayTextEffect = (index) => {
let i = 0
const speed = 100 // 字符输出速度,单位是毫秒
const fullText = pageChat.assistantChat[index].answer
let displayText = ''
const interval = setInterval(() => {
if (i < fullText.length) {
displayText += fullText.charAt(i)
userRes.value[index].displayText = displayText // 更新已显示的文本
i++
} else {
clearInterval(interval) // 文本完全显示后停止
}
}, speed)
}
第二种
前提是类似于这样的数据结构
const messages = ref([
{ content: '有什么问题,我随时帮你解答', type: 'assistant' }
])
// 流式输出 response后端返回的文字字符串,messages下面定义好的
const simulateResponse = (response, messages) => {
messages.value.push({ content: '', role: 'assistant' })
for (let i = 0; i < response.length; i++) {
setTimeout(() => {
scrollToBottom()
messages.value[messages.value.length - 1].content += response[i]
}, 100 * i)
}
}
还有第三种方案就是一直向服务端去拿响应到的结果,后续会更新
标签:输出,const,messages,流式,response,content,displayText,value,三两 From: https://blog.csdn.net/weixin_51943308/article/details/141953235