位置: 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之间的转换

  • 小米手机如何改app名字(小米手机如何改变默认浏览器)

    小米手机如何改app名字(小米手机如何改变默认浏览器)

  • 华为mate20的充电器是多少w(华为mate20的充电器参数)

    华为mate20的充电器是多少w(华为mate20的充电器参数)

  • iPhone11熄屏也能显示时间(苹果十一熄屏)

    iPhone11熄屏也能显示时间(苹果十一熄屏)

  • 华为leica是什么机型(华为LEICA是什么机)

    华为leica是什么机型(华为LEICA是什么机)

  • beats耳机长期没用无法充电(beats耳机长期不用)

    beats耳机长期没用无法充电(beats耳机长期不用)

  • 充电宝fit+和两个闪电是什么意思(充电宝的fit与fit+有什么区别)

    充电宝fit+和两个闪电是什么意思(充电宝的fit与fit+有什么区别)

  • 华为nova7se像素多少(华为nova7se像素怎么调)

    华为nova7se像素多少(华为nova7se像素怎么调)

  • 9x和9xpro对比(9x和9pro一样吗)

    9x和9xpro对比(9x和9pro一样吗)

  • 微信好友上限10000人?(微信好友上限10000人然后怎么加人)

    微信好友上限10000人?(微信好友上限10000人然后怎么加人)

  • 淘气值799还能涨吗(淘气值从799开始下降是什么情况)

    淘气值799还能涨吗(淘气值从799开始下降是什么情况)

  • 发完红包后删除好友对方能收到吗(发完红包后删除聊天记录)

    发完红包后删除好友对方能收到吗(发完红包后删除聊天记录)

  • 笔记本目前最大的用处(笔记本目前最大内存是多少)

    笔记本目前最大的用处(笔记本目前最大内存是多少)

  • qq打电话微信会忙线吗(qq打电话微信会显示什么)

    qq打电话微信会忙线吗(qq打电话微信会显示什么)

  • 一加六什么时候发布的(1加6什么时候开售的)

    一加六什么时候发布的(1加6什么时候开售的)

  • 手机qq怎么临时对话(qq登录新手机怎么恢复聊天记录)

    手机qq怎么临时对话(qq登录新手机怎么恢复聊天记录)

  • b站怎么设置动态头像(b站怎么设置动态仅自己可见)

    b站怎么设置动态头像(b站怎么设置动态仅自己可见)

  • 魅族16th怎么进入开发者(魅族16如何)

    魅族16th怎么进入开发者(魅族16如何)

  • 京东必购码怎么赠送(京东必购码怎么取消绑定)

    京东必购码怎么赠送(京东必购码怎么取消绑定)

  • 抖音怎么关闭礼物特效(抖音怎么关闭礼物等级)

    抖音怎么关闭礼物特效(抖音怎么关闭礼物等级)

  • 苹果更新软件在哪里(苹果更新软件在那里关?)

    苹果更新软件在哪里(苹果更新软件在那里关?)

  • 抖音视频时间如何加长(抖音视频如何删除)

    抖音视频时间如何加长(抖音视频如何删除)

  • 手机上取消qq绿钻续费(手机qq怎么关闭绿钻自动续费)

    手机上取消qq绿钻续费(手机qq怎么关闭绿钻自动续费)

  • 京东白条如何关闭(京东白条如何关闭注销)

    京东白条如何关闭(京东白条如何关闭注销)

  • win11怎么安装CAD2021? windows11安装cad的详细图文教程(win11怎么安装CAD2008)

    win11怎么安装CAD2021? windows11安装cad的详细图文教程(win11怎么安装CAD2008)

  • Linux系统中网络数据存储工具命令TcpDump的使用教程(linux系统网络日志)

    Linux系统中网络数据存储工具命令TcpDump的使用教程(linux系统网络日志)

  • 递延所得税资产会计处理全过程
  • 教育附加费税率怎么算
  • 上传附报资料在哪下载
  • 银行对公回单可以在家打印吗
  • 简易征收的收入包括哪些
  • 原材料月末有余额吗
  • 实收资本增加的原因
  • 第二季度的季初资产总额和季末资产总额怎么填
  • 个人独资公司需要报税吗
  • 无形资产减值损失可以转回吗
  • 施工企业所得税税率是多少
  • 承包经营承包费增值税
  • 非盈利组织的好处
  • 固定资产发票未到怎么提折旧
  • 企业计提固定资产折旧
  • 股息红利个人所得税扣税失败
  • 建筑业增值税税率2022
  • 成本费用的结转方法
  • 计提工资附加费啥意思
  • 个人社保费需要交多少年
  • 项目单位自筹资金
  • 把d盘的空间分配到e盘
  • backupnotify.exe是什么文件的进程 backupnotify进程安全吗
  • 土地拍卖资金交到哪里
  • 在银行按揭贷款买房是抵押吗
  • 收到退回的保证金
  • 什么是会计分录其一般表达形式是怎样的
  • php://input用法
  • 关联方借款利息所得税前扣除
  • php中imagecreatefromjpeg
  • sybyl安装教程
  • 垃圾清运费属于什么服务
  • php转换器
  • java中文乱码解决总结
  • 如何修改python
  • iconfont原理
  • phpstorm创建php文件
  • php 微信公众号自定义菜单
  • 收到房租怎么做账务处理
  • 招待费发票怎么做分录
  • 年报超时了可以补报吗
  • 购入项目用仪器怎么做账
  • sql分页存储过程
  • 外来原始凭证包括一次凭证,累计凭证和汇总凭证
  • 做账是指做什么
  • 企业出租经营权是否征税
  • 事业单位收到退税账务处理
  • 现金抵用券使用说明怎么写
  • 待抵扣进项税额和进项税额的区别
  • 固定资产补缴增值税怎么做帐务处理
  • 已计提教育费附加但是未扣除个税
  • 公司接待考察团的费用入哪个科目
  • 金融资产发生的负债包括
  • 增值税专用发票丢了怎么补救
  • MySQL Semisynchronous Replication介绍
  • windows xp简单操作教程
  • freebsd中文手册
  • 安装win7系统需要注意什么
  • mac电脑虚拟机怎么安装
  • mac怎么设置默认打开方式
  • windows环境是什么意思
  • micc是什么意思中文
  • Jquery+Ajax+PHP+MySQL实现分类列表管理(上)
  • 在解决ul居中问题时想到的几点
  • shell脚本用法
  • js出错
  • [置顶]bilinovel
  • javascript教程
  • node stream(流)有哪些?
  • jquery对动态生成的进行操作
  • js实现省份和市级联动
  • 税务徽标含义
  • 湖北生育登记网上服务大厅官网查询
  • 小规模纳税人购买车辆可以抵扣税吗
  • 税务稽查建议书反馈意见
  • 不予处理的法律依据
  • 东莞房地产协会副会长
  • 个税申报所属期和所得期
  • 房产税怎么申报操作流程视频
  • 代扣app有哪些
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设