位置: IT常识 - 正文

vue 模拟 chatgpt 聊天效果:js 实现逐字显示、延时函数模拟对话(vue 模拟遥控按钮)

编辑:rootadmin
vue 模拟 chatgpt 聊天效果:js 实现逐字显示、延时函数模拟对话 vue 模拟 chatgpt 聊天效果:js 实现逐字显示、延时函数模拟对话

推荐整理分享vue 模拟 chatgpt 聊天效果:js 实现逐字显示、延时函数模拟对话(vue 模拟遥控按钮),希望有所帮助,仅作参考,欢迎阅读内容。

vue 模拟 chatgpt 聊天效果:js 实现逐字显示、延时函数模拟对话(vue 模拟遥控按钮)

文章相关热门搜索词:vue 模拟设备操作界面,vue 模拟excel 撤回恢复,vue 模拟数据,vue 模拟接口数据,vue 模拟短视频平台,vue 模拟excel 撤回恢复,vue 模拟控制台界面,vue 模拟数据,内容如对您有帮助,希望把文章链接给更多的朋友!

模拟 chatgpt 聊天功能,展示对话效果。其中比较有意义的技术点是:js 实现逐字显示、延时函数,同步遍历。

<template> <div class="chat-gpt"> <div id="chat-dialog" class="chat-dialog" ref="chatDialogRef"> <div id="chat-list" class="chat-list" ref="chatListRef"> <div v-for="(item, index) in chatList" :key="index"> <img v-if="item.status && index % 2 == 0" src="../../public/img/speak1.gif" alt="" /> <div :class="index % 2 == 0 ? 'odd' : 'even'">{{ item.content }}</div> </div> </div> </div> </div></template><script>export default { data() { return { textCount: 0, timer: null, chatBaseList: [ "以今日5辆满电无人车,运输5小时能运完50吨货物的标准,已知每辆无人车运输1小时耗电10%,运输效率是多少,每辆无人车耗电多少?花费多长时间?", "运输效率:50吨/5小时=10顿/小时,每辆无人车耗电:10%×5小时=50%,需花费5小时。", "以现有运输效率前提下,再增加5辆无人运输车,完成共计150吨物资的运输任务,整体效率会提高到多少?每辆无人车耗电又是多少?共花费多长时间?", "增加到10辆无人车,完成共计150吨物资运输任务,整体效率会提高到15顿/小时,每辆无人车耗电百分比是15%。运完150吨的话,总共要耗用1.5小时。", "我来想想是否确认执行此调配操作?", "您好,请您慎重考虑。我们将根据您的确认来决定是否执行此调配操作。", "是" ], chatList: [] }; }, mounted() { this.initGPT(); }, methods: { // 延时函数 sleep(delaytime = 10000) { return new Promise(resolve => setTimeout(resolve, delaytime)); }, // 同步遍历,自定义延时时间 async delayDo( iterList, callback = data => console.log(`数据:${data}`), delaytimeList ) { let len = iterList.length; for (let i = 0; i < len; i++) { callback(iterList[i], i); await this.sleep(delaytimeList[i]); } }, // 逐字显示内容 getChatContent(text, index) { this.timer = setInterval(() => { this.textCount++; if (this.textCount == text.length + 1) { this.textCount = 0; this.chatList.splice(index, 1, { content: text, status: false }); clearInterval(this.timer); return; } // 取字符串子串 let nowStr = text.substring(0, this.textCount); this.chatList.splice(index, 1, { content: nowStr, status: true }); }, 200); }, // 点击开始聊天 initGPT() { // const delaytimeList = [11000, 8000, 6000, 15000, 4000]; const delaytimeList = [16000, 11000, 16000, 16000, 5000, 7000]; this.delayDo( this.chatBaseList, (item, i) => { this.getChatContent(item, i); }, delaytimeList ); } }};</script><style lang="scss" scoped>.chat-gpt { width: 33rem; height: 43rem; .chat-dialog { position: relative; height: 43rem; background: 0/33rem url("../../public/img/chat-bg.png") no-repeat; overflow: hidden; .close-icon { position: absolute; top: 1rem; right: 1rem; width: 3.4rem; height: 3.4rem; img { width: 100%; height: 100%; } } .chat-list { display: flex; flex-direction: column; width: 90%; margin: 0 auto; margin-top: 2rem; overflow: auto; >div { display: flex; margin-top: 1rem; >div { max-width: 19rem; padding: 0.6rem; opacity: 0.8; font-size: 0.9rem; font-family: FZLanTingHei-L-GBK; font-weight: 400; color: #c5e7ff; text-align: start; } .odd { align-self: flex-start; background: #435e6f; border-radius: 0px 16px 16px 16px; } .even { align-self: flex-end; background: #31b8c8; border-radius: 16px 0px 16px 16px; } img { width: 2rem; height: 2rem; margin-right: 1rem; } } >div:nth-of-type(odd) { align-self: flex-start; } >div:nth-of-type(even) { align-self: flex-end; } } } .chat-tips { display: flex; height: 5.82rem; margin-top: 1rem; .gpt-icon { height: 100%; img { height: 100%; } } }}</style>

chatgpt 聊天效果

本文链接地址:https://www.jiuchutong.com/zhishi/281433.html 转载请保留说明!

上一篇:Mac 键盘快捷键大全(mac键盘快捷键设置)

下一篇:Javascript Object和Map之间的转换

  • iphonexs键盘下面空白(iphone键盘最下面)

    iphonexs键盘下面空白(iphone键盘最下面)

  • 闲鱼屏蔽全部商品多久恢复(闲鱼屏蔽全部商品怎么弄)

    闲鱼屏蔽全部商品多久恢复(闲鱼屏蔽全部商品怎么弄)

  • 苹果手机微信照片保存在哪里(苹果手机微信照片访问权限不见了)

    苹果手机微信照片保存在哪里(苹果手机微信照片访问权限不见了)

  • 直播模块可能启动失败,是否清理直播进程(常见直播模式)

    直播模块可能启动失败,是否清理直播进程(常见直播模式)

  • 保修期内苹果电池损耗多少可以免费更换(保修期内苹果电脑进水维修多少钱)

    保修期内苹果电池损耗多少可以免费更换(保修期内苹果电脑进水维修多少钱)

  • 苹果x基带是高通还是英特尔(苹果x基带有几种)

    苹果x基带是高通还是英特尔(苹果x基带有几种)

  • 苹果手机哪些自带软件可以删除(苹果手机哪些自带软件不可以删除)

    苹果手机哪些自带软件可以删除(苹果手机哪些自带软件不可以删除)

  • 苹果更新了系统可不可以还原到之前的系统(苹果更新了系统可以换原来的系统嘛)

    苹果更新了系统可不可以还原到之前的系统(苹果更新了系统可以换原来的系统嘛)

  • 如何在电脑上打包照片(如何在电脑上打分数)

    如何在电脑上打包照片(如何在电脑上打分数)

  • id是账号吗(wps用户id是账号吗)

    id是账号吗(wps用户id是账号吗)

  • wps表格拆分单元格(wps表格拆分单元格一分三)

    wps表格拆分单元格(wps表格拆分单元格一分三)

  • word没保存能恢复吗(word如果没保存怎么找回)

    word没保存能恢复吗(word如果没保存怎么找回)

  • 微信通话中断00:00是什么意思(微信通话中断00:00对方有接通吗)

    微信通话中断00:00是什么意思(微信通话中断00:00对方有接通吗)

  • 平板电脑有什么用(平板电脑有什么好玩的游戏)

    平板电脑有什么用(平板电脑有什么好玩的游戏)

  • 如何用pr快速添加字幕(pr怎么添加v1)

    如何用pr快速添加字幕(pr怎么添加v1)

  • 华为tltal00是什么型号(华为tlttl00什么型号)

    华为tltal00是什么型号(华为tlttl00什么型号)

  • 如何去掉有页眉的空白页(如何去掉页眉下框线)

    如何去掉有页眉的空白页(如何去掉页眉下框线)

  • iqoo是否有耳机孔(iqoo3有耳机接口吗)

    iqoo是否有耳机孔(iqoo3有耳机接口吗)

  • iqoo虚拟键怎么用(iqoo5虚拟键)

    iqoo虚拟键怎么用(iqoo5虚拟键)

  • wps段落设置在哪(wps段落设置在哪里找)

    wps段落设置在哪(wps段落设置在哪里找)

  • 如何修改串号(改串号软件下载)

    如何修改串号(改串号软件下载)

  • 小米运动蓝牙耳机青春版怎么连接(小米运动蓝牙耳机mini)

    小米运动蓝牙耳机青春版怎么连接(小米运动蓝牙耳机mini)

  • 西瓜视频怎么私信关注的人(西瓜视频怎么私信别人)

    西瓜视频怎么私信关注的人(西瓜视频怎么私信别人)

  • 微信可以单独设置提示音吗(微信可以单独设置消息提示音吗)

    微信可以单独设置提示音吗(微信可以单独设置消息提示音吗)

  • 多级列表在哪里(多级列表在哪里设置)

    多级列表在哪里(多级列表在哪里设置)

  • 苹果补充更新macOS Catalina10.15.7版本(mac更新内容)

    苹果补充更新macOS Catalina10.15.7版本(mac更新内容)

  • 〖大前端 - 基础入门三大核心之JS篇㉔〗- JavaScript 的数组的常用方法 (一)(大前端最新)

    〖大前端 - 基础入门三大核心之JS篇㉔〗- JavaScript 的数组的常用方法 (一)(大前端最新)

  • 固定资产清理的账务处理
  • 小规模纳税人不动产租赁税率
  • 金蝶k3费用发票怎么做
  • 公司购买的打印机
  • 2019年小型微利企业优惠政策
  • 金税盘服务费不能全额抵扣吗
  • 定期定额户个人所得税怎么申报
  • 台湾发票大陆能做账吗
  • 单位投资非盈利性组织怎样核算
  • 个人缴纳工会会费比例
  • 收到政府土地收回的短信
  • 从公司账户转给个人账户取出来发给员工做过节费
  • 商业承兑到期对方不付款如何起诉
  • 用库存物资抵货怎么做账
  • 购买投资理财产品放的会计处理怎么做?
  • 附加税里包括地税吗
  • 国家税务总局公告2012年第57号
  • 大连国税局工资待遇怎么样
  • 已抵扣发票如何查询开票明细
  • 购买现金支票的扣费方式
  • 债务转为资本什么意思
  • 有产能无产量
  • 汇算清缴补缴税款分录小企业会计
  • 建造合同收入的内容包括
  • 国企承接政府项目
  • 不计入开办费可以吗
  • 抵押质押的含义
  • 公司从超市购买东西缴纳印花税吗
  • php变量如何定义
  • linux sed -s
  • 不动产租赁费计入什么科目
  • 增值税务发票怎么作废
  • 小企业会计准则适用于哪些企业
  • 辞退补偿款怎么算
  • 应付福利费和应付职工薪酬的关系
  • django-cors-headers
  • 存货包括其他业务成本吗
  • 营改增企业所得税税率
  • php绘图库
  • 红字发票信息表盖什么章
  • 结算备付金管理办法(2019年修订版)
  • 增值税纳税申报操作流程
  • 离职员工的个税忘记申报了补申报会被处罚吗
  • 保险费计入固定资产原值吗
  • 公司员工私车公用协议
  • 代销费是谁给谁
  • 营业成本和生产费用一样吗
  • 所得税费用是会计科目吗
  • 咨询费收入怎么入账
  • 代扣代缴的增值税怎么做账
  • 哪种情形的货物或者服务可以采用竞争性谈判方式采购
  • 三年期定期存款利率怎么算
  • 存货周转次数下降的原因
  • 政府对失业人员补贴
  • 省外出差
  • 建筑简易征收适用哪些业务
  • 年底计提利息会计分录
  • 为什么我们需要政府
  • mssql数据库的账号密码
  • win8系统怎样
  • 解决windows update问题
  • 电脑上view是什么意思
  • win8 防火墙
  • win7怎样解除无线连接限制
  • win10系统edge浏览器打不开解决办法
  • cocos2dx4.0教程
  • 学javascript有前途吗
  • perl-v
  • js运行时错误
  • 超实用的八个开车技巧
  • jquery做下拉
  • jQuery ajax提交Form表单实例(附demo源码)
  • python中__init__
  • jquery.js插件
  • python flask框架 web服务器
  • 黑龙江地方税务总局官网
  • 税务 违法税收
  • 河北残疾人申报系统
  • 陕西国家税务总局官网登录入口
  • 张宁年轻
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设