首先,在项目的组件目录中创建一个名为ChatBox.vue的文件。 在ChatBox.vue中,我们可以使用<template>标签定义聊天框的布局和内容。例如,可以使用元素来显示聊天记录,使用元素来输入消息。 在标签中,我们需要导出一个名为ChatBox的Vue组件对象。可以使用export default语句来导出组件对象。 在组件对象中,可以定义组件的...
该代码使用了 Vue.js 的生命周期钩子$nextTick,这是一个异步函数,它会在下一次 DOM 更新循环结束之后执行,保证了在该钩子内执行的代码,元素已经更新完毕。 通过使用querySelector方法,该代码获取了 class 为chatBox的 DOM 元素,并将该元素的scrollTop属性设置为一个较大的数值,使得滚动条滚动到了页面的底部。
index.vue <template> 访客 <RightRole v-if="item.role === '访客'" :type="item.type" :content="item.content" :avatarURL="visitorAvatarURL" @openMenu="openMenu($event, index, true)" /> <LeftRole v-if="item.role === '客服'" :type="item.type" :content="item.content" :a...
jsconfig.json init Nov 10, 2023 package-lock.json Remove @vue/compat. Nov 17, 2023 package.json Remove @vue/compat. Nov 17, 2023 vite.config.js Remove @vue/compat. Nov 17, 2023 Repository files navigation README chat-box Project setup...
"flex-shrink" 是CSSFlexbox 布局中的一个属性。它定义了 flex 项目相对于其他项目的缩小比例。默认值为 1。当容器空间不足时,所有项目将缩小,比例由 flex-shrink 值决定。 如果 flex-shrink 为 0 则元素不能缩小,相当于关闭了缩小的功能。 例如上面代码中, .chatAvatar 元素设置了 flex-shrink 为 0,意味着...
.chatUsername { font-size: 12px; white-space: nowrap; color: #999; margin-bottom: 2px; } .chatContent{ border-radius: 10px 10px 10px 0px; padding: 10px; background-color: rgb(255,255,255); box-shadow: 0 5px 30px rgb(50 50 93 / 8%), 0 1px 3px rgb(0 0 0 / 5%); ...
$el.querySelector(".chatBox"); container.scrollTop = 999999999; }); }, //提醒声音 alertSound(){ tools.alertSound("chatMessageAudio",""); } }, mounted: function () { } } .chatAppBody{ display: flex; flex-direction: column; height: 100vh; background-color: #f1f5f8; } .chat...
"flex: 1" 是CSSFlexbox 布局中的一个属性。它用于设置 flex-grow 属性。flex-grow 属性定义了项目的放大比例,默认值为 0。当所有项目的 flex-grow 值之和为正数时,剩余空间将平均分配给这些项目。 例如上面这段代码中, .chatBox 元素设置了 flex-grow 为 1,意味着它会占用剩余空间的1份。 这样做的好处...
$(".chat-container").scrollTop($(".chat-container")[0].scrollHeight); }); }, 断开连接 弹框提示,选择是否重连。重连时需要先手动断开连接 当发送的文件出错或者过大,可能会导致断开连接 当离开当前路由,组件销毁的时候,需要手动断开连接 // 断开连接回调事件 ...
如下部分代码对应项目路径为:src/core/commands/gpt/subCommands/ChatBox.vue const response = await fetch('http://127.0.0.1:7345/api/gpt/get', { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ ...