<template>
<div class="talkContent">
<div class="talkShow">
<div :class="[(item.person=='mechanical')?'mechanicalTalk':'mineTalk']" v-for="(item,index) in talkList" :key="index">
<span>{{item.say}}</span>
</div>
</div>
<div class="talkInput">
<form @submit.prevent="getQuestion" class="userSearch">
<el-input
placeholder="请输入内容"
v-model="contentVal"
size="small">
<i slot="suffix" class="el-input__icon el-icon-position" style="cursor: pointer;" @click="getQuestion"></i>
</el-input>
</form>
</div>
</div>
</template>
<script>
export default {
data() {
return {
talkList: [
{ id:"1", person: 'mechanical', say: '你好,有什么可以帮到你呢?' },
],
isMine: 1,
contentVal: '',
};
},
methods: {
getQuestion() {
if (this.contentVal == '') {
this.$message.error('请输入内容');
return;
}
// admin提问数据push()
this.talkList.push({ id: Date.now(), person:'admin', say: this.contentVal });
// 清空输入栏数据
this.contentVal = '';
this.getAnswer();
},
async getAnswer() {
// 调用API获取回答, 模拟后端返回的数据流式输出
const data ='文字逐个展示,文字逐个展示,文字逐个展示文字逐个展示文字逐个展示文字逐个展示文字逐个展示文字逐个展示文字逐个展示文字逐个展示文字逐个展示';
// mechanical 模拟回答
this.talkList.push({ id: Date.now(), person:'mechanical', say: '...' });
// 流式输出文字逐个展示
let text = "";
const length = this.talkList.length;
for (let i = 0; i < data.length; i++) {
text += data.charAt(i);
await new Promise((resolve) => {
setTimeout(resolve, 50)
});
this.talkList[length - 1].say= text;
}
}
},
};
</script>
<style scoped>
.talkContent {
margin: 50px auto 0;
font-size: 14px;
}
.talkShow {
height: 400px;
margin: 10px auto 0;
overflow: auto;
}
.talkInput {
margin: 10px auto 0;
display: flex;
}
.mechanicalTalk {
margin: 10px;
}
.mechanicalTalk span {
display: inline-block;
background: white;
border-radius: 10px;
padding: 5px 10px;
border: 1px solid rgb(214, 216, 219);
border-top-left-radius: 0px;
word-break: break-all;
text-align: left;
}
.mineTalk {
margin: 10px;
text-align: right;
}
.mineTalk span {
display: inline-block;
border-radius: 10px;
border-top-right-radius: 0px;
background: #409eff;
color: #fff;
padding: 5px 10px;
word-break: break-all;
text-align: left;
}
</style>
vue聊天对话ai流式输出
转载请注明出处或者链接地址:https://www.qianduange.cn//article/11353.html
相关文章
-
执行npm run serve 找不到vite模块 Error: Cannot find module
-
问题:无法加载文件 C:\Users\ASUS\AppData\Roaming\npm\npm.ps1,因为在此系统上禁止运行脚本。
-
共享依赖的新选择:探索 PNPM 在低代码开发中的威力
-
npm install报错:ERR! configure error gyp ERR! stack Error: `gyp` failed with exit code: 1
-
安装nvm(详细教程),配置全局node环境并安装vue/cli
-
npm install卡住出现npm WARN old lockfile解决办法
-
npm install报错,解决记录
-
npm报错:request to https://registry.npm.taobao.org failed, reason certificate has expired
-
“cnpm“ 不是内部或外部命令, 也不是可运行的程序(基于node环境安装好的状态下)
-
2025届毕设选题推荐:JavaWeb、SSM、SpringBoot、Vue、微信小程序
发布的文章
nlohmann/json的介绍和使用详解
2024-11-02 11:11:09
使用python读写txt和json(jsonl)大文件
2024-11-02 11:11:02
python将字典数据保存为json文件
2024-11-02 11:11:55
【geojson 各国数据获取指引】
2024-11-02 11:11:55
settings.json:Visual Studio Code的深度定制化核心
2024-11-02 11:11:55
如何使用 Python 批量检测和转换 JSONL 文件编码为 UTF-8
2024-11-02 11:11:19
执行npm run serve 找不到vite模块 Error: Cannot find module
2024-11-02 11:11:16
前端使用 npm install后会报code ERESOLVEERESOLVE unable to resolve dependency tree等导入依赖错误
2024-11-02 11:11:09
问题:无法加载文件 C:\Users\ASUS\AppData\Roaming\npm\npm.ps1,因为在此系统上禁止运行脚本。
2024-11-02 11:11:07
共享依赖的新选择:探索 PNPM 在低代码开发中的威力
2024-11-02 11:11:56
大家推荐的文章