30 分钟接入 Vue 聊天机器人界面vue-bot-ui 实战笔记【免费下载链接】vue-bot-uiFor the one who is finding a customizable chatbot UI.项目地址: https://gitcode.com/gh_mirrors/vu/vue-bot-ui接到给网站加一个在线客服机器人的需求时很多 Vue 开发者第一反应是打开组件库找现成组件结果发现 Element、Vuetify 里根本没有聊天窗口这种东西。vue-bot-ui 正是为解决这个空白而生的一个开箱即用的 Vue 2 聊天机器人界面组件消息气泡、输入框、按钮选项、正在输入动画全部替你做好你要做的只是往里灌数据、把用户消息转发给你的机器人接口。这篇文章按我实际接入的顺序记录从零到能跑通一轮对话全程读完约 30 分钟。为什么我放弃手写聊天窗口改用现成组件网上不乏手搓聊天界面的教程但我评估之后放弃了原因很实在动画和过渡气泡弹出、面板开关、输入按钮切换这些微交互手写要花大量时间调试消息滚动新消息到达自动滚到底部看似简单自己做总是差一口气正在输入指示器这个小细节决定对话的真实感组件里已经内置按钮选项消息postback发给接口和url打开链接两种交互手写还得处理事件冒泡一句话总结业务逻辑才是我们的核心价值界面细节交给组件。第一步安装并注册组件如果你用 npmnpm install vue-bot-ui用 yarn 则执行yarn add vue-bot-ui然后在组件里引入并注册import { VueBotUI } from vue-bot-ui export default { components: { VueBotUI } }这一步没有任何坑装完就能在模板里写VueBotUI /了。第二步用消息数组让界面先动起来组件的核心数据是一个messages数组每条消息最少包含三个字段字段必填说明agent是bot或user决定气泡归属type是text文本气泡 /button按钮气泡text是消息正文disableInput否为true时该消息展示期间禁用输入框先塞两条最朴素的文本消息data () { return { messages: [ { agent: bot, type: text, text: 你好我是智能助手 } ] } }模板中绑定即可VueBotUI :messagesmessages :optionsbotOptions msg-sendhandleSend /刷新页面右下角会出现一个气泡按钮点击弹出聊天面板第一条机器人消息就显示出来了。第三步让机器人学会给选项光会打字不算客服得让机器人抛出可选按钮。这就是第二种气泡类型type: button{ agent: bot, type: button, text: 请选择你遇到的问题类型, disableInput: true, options: [ { text: 订单查询, value: order_query, action: postback }, { text: 商品咨询, value: product_consult, action: postback }, { text: 查看帮助文档, value: https://docs.example.com, action: url } ] }每个选项的action决定点击后的行为postback把整个选项对象抛回给父组件由你在msg-send里处理适合继续追问、查接口url直接以新标签页打开链接value就是跳转地址注意我把disableInput设成了true这样在用户点按钮之前无法打字输入保证流程不会被乱入的文本打断。用事件串起你的机器人接口msg-send 的正确用法组件对外只有一个核心事件msg-send它同时覆盖两种来源用户在输入框回车发送以及点击按钮选项。它返回的value是一个对象文本输入时取value.text按钮选项时则是整个 option 对象。一个完整的对话循环长这样参考了仓库里的 src/App.vuemethods: { handleSend (value) { // 1. 先把用户消息追加进数组界面立即回显 this.messages.push({ agent: user, type: text, text: value.text }) // 2. 亮起正在输入指示器模拟真实等待 this.botTyping true // 3. 假装请求你的机器人 API fetch(/api/bot, { method: POST, body: JSON.stringify({ text: value.text }) }) .then(res res.json()) .then(reply { this.botTyping false this.messages.push({ agent: bot, ...reply }) }) } }botTyping是组件的一个 prop设为true时消息区尾部会出现三个跳动的小圆点。用它模拟延迟比机器人秒回要自然得多。另外两个生命周期事件也值得知道事件触发时机init每次打开聊天面板时触发适合在这里拉取首条问候语destroy面板关闭时触发适合清理定时器等资源想在页面其他地方控制聊天窗口开关msg-send是组件向外发事件反过来你也可以在任意代码里通过三个全局自定义事件遥控它事件名作用botui-open打开聊天面板botui-close关闭聊天面板botui-toggle切换开关状态用法也很直白比如在导航栏放一个联系我们按钮document.dispatchEvent(new CustomEvent(botui-open))加上is-open和open-delay两个 prop你还能控制页面加载后自动弹窗is-open设为true表示初始化即打开配一个毫秒级的open-delay做延迟很适合做欢迎弹窗。15 个配置项把界面调成你品牌的样子options对象支持 15 个配置项覆盖颜色、尺寸、文案三层常用清单如下配置项默认值作用botTitleChatbot面板顶部的机器人名称colorScheme#1b53d0气泡按钮与面板头部的主题色textColor#fff气泡按钮图标与标题文字颜色bubbleBtnSize56悬浮气泡按钮的尺寸(px)animationtrue设为 false 可关闭全部动画botAvatarImg占位图机器人头像图片msgBubbleBgBot#f0f0f0机器人消息背景色msgBubbleColorBot#000机器人消息文字色msgBubbleBgUser#4356e0用户消息背景色msgBubbleColorUser#fff用户消息文字色inputPlaceholderMessage输入框占位提示举个例子把整体改成绿色调、机器人用浅色气泡、用户用品牌深色botOptions: { botTitle: 商城小助手, colorScheme: #13c2a2, msgBubbleBgBot: #f6ffed, msgBubbleBgUser: #13c2a2, inputPlaceholder: 输入您的问题… }主题色一变整个界面气质立刻就统一了。还不够用插槽和 CSS 类名给你兜底配置项解决不了的需求还有两招第一招插槽替换。组件预留了 5 个插槽常见的是在输入框旁边加功能按钮VueBotUI :messagesmessages :optionsbotOptions template v-slot:actions button clickopenEmoji/button button clickuploadFile/button /template /VueBotUI其余插槽一览header面板头部、sendButton发送按钮、bubbleButton悬浮气泡按钮、botTyping打字指示器。第二招改 CSS。每个组件都带独立的类名前缀为qkb-例如机器人消息是.qkb-msg-bubble--bot。样式覆盖不了的细节直接写一段全局样式即可不用动源码。我踩过的三个坑提前帮你避开按钮流程中忘了disableInput点击选项后组件并不自动锁输入框如果下一轮机器人还在思考用户可能会连发多条。正确做法是回复消息里带上disableInput: true或自己维护一个输入锁定状态。is-open与open-delay必须配合单独设open-delay而没有is-open: true是不会生效的因为延时打开的逻辑挂在is-open分支里。动画开关影响测试写单元测试或做自动化截图时记得把animation设为false否则transition会造成断言时机不稳定。想在本地跑起完整 Demo 摸索源码如果边看代码边学效率更高可以克隆仓库本地运行git clone https://gitcode.com/gh_mirrors/vu/vue-bot-ui cd vue-bot-ui yarn yarn serve本地开发服务器默认跑在 1901 端口打开就能看到带模拟消息流、按钮选项、打字指示器的完整示例配合 src/App.vue 和 src/helpers/fake-messages.js 读数据流一目了然。写在最后接入 vue-bot-ui 的过程比我想象中短得多真正写业务代码的时间不超过一顿午饭。它把聊天界面里最琐碎的部分气泡、动画、滚动、输入控制都封装好了留给你的是最核心的问题你的机器人到底该说什么、怎么接你的业务接口。顺带一提作者在 README 里列了待办清单按钮选项的target属性、更多消息气泡类型、完整测试覆盖都还在路上。等它更成熟这个组件值得放进你 Vue 项目的工具箱。如果你的下一个需求恰好是快速交付一个能用的聊天机器人界面不妨现在就 clone 下来跑一遍 demo——百闻不如一跑。【免费下载链接】vue-bot-uiFor the one who is finding a customizable chatbot UI.项目地址: https://gitcode.com/gh_mirrors/vu/vue-bot-ui创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考