vue-bot-ui 快速上手三步给你的 Vue 2 项目装上一个可定制的聊天机器人界面【免费下载链接】vue-bot-uiFor the one who is finding a customizable chatbot UI.项目地址: https://gitcode.com/gh_mirrors/vu/vue-bot-ui一个真实的下午客服机器人该从哪来小林是一家电商 SaaS 公司的前端工程师。上周老板丢给他一个任务官网右下角要加一个客服机器人两周内上线。他打开自己维护的老 Vue 2 项目心里盘算着工作量——消息气泡的样式、输入框、滚动到底部、正在输入动画、移动端适配……这些琐碎交互加起来至少能吃掉他三四天。他需要的其实很简单一个现成的、能换肤的、把数据和 UI 解耦的聊天窗口组件。而vue-bot-ui正是为这种需求而生的开源组件——一个面向 Vue.js 2 开发者的可定制聊天机器人界面你只管喂给它消息数据和配置项剩下的界面交互它全包。如果你也在为给应用加个聊天入口这件事发愁这篇文章会带你完整走一遍从安装到上线的全过程。初次见面装好到跑通只需要三步先说实话这个组件只依赖 Vue 2没有花哨的构建要求安装方式和其他 npm 包没有区别。npm install vue-bot-ui # 或者 yarn add vue-bot-ui然后在你的组件里注册它import { VueBotUI } from vue-bot-ui export default { components: { VueBotUI, }, }最后在模板里放上去喂一份消息数组、一份配置对象再监听一个事件VueBotUI :messagesmessageData :optionsbotOptions msg-sendhandleMsgSend /跑起来之后页面右下角会出现一个悬浮气泡按钮点开就是完整的聊天面板。到这里小林花在集成上的时间大约是一杯咖啡的功夫。想先看效果再动手克隆仓库到本地执行yarn serve浏览器访问http://localhost:1901官方示例就躺在src/App.vue里直接改代码热更新边看边调。这个组件用到的 Props 只有 6 个messages必填、options、bot-typing、input-disable、is-open、open-delay。记住前两个你就能干活了。能力渐进解锁从能聊天到像产品第一层数据驱动聊天记录就是一份数组vue-bot-ui的核心理念是界面和数据解耦。你不需要手动操作 DOM 去插入消息只需要往messages数组里push一个对象面板会自动渲染并滚动到底部。每条消息的格式非常直白{ agent: bot, // bot 或 user决定气泡靠左还是靠右 type: text, // 消息类型text 文本 或 button 按钮 text: Hello. How can I help you, disableInput: false, // 这条消息出现时是否禁用输入框 }组件内部通过type字段自动匹配气泡组件见src/components/MessageBubble/目前内置两种SingleText纯文本气泡和ButtonOptions按钮选项气泡。你不需要关心组件切换逻辑改数据就行。两个高频辅助 Props 在这里就派上用场了bot-typing设为true输入区上方会显示正在输入的三点动画模拟机器人思考。input-disable设为true输入框变为禁用态防止用户在机器人说话时插话。这就是第一层的全部玩法你的业务代码只负责维护数组和布尔值其他都是组件的事。第二层事件系统接上你真正的机器人 API静态消息演示不了真实场景。小林的机器人 API 在服务器上消息需要双向流动vue-bot-ui用三个事件把这条链路打通了事件触发时机典型用途init面板每次打开时请求机器人欢迎语msg-send用户发送消息或点击按钮选项时把用户输入提交给你的 APIdestroy面板关闭时清理状态、上报数据当用户点击按钮选项时同样会触发msg-send事件回调携带的value对象里带上了按钮的value字段——这正是postback动作的意义把按钮点击当成一次消息请求发给后端。而action: url的选项则直接渲染成链接按钮新窗口打开不走消息链路。更有意思的是你可以通过三个自定义 DOM 事件从组件外部控制面板botui-open、botui-close、botui-toggle。比如在页面其他地方放一个联系我们的链接点击时广播botui-open聊天面板就会自动打开实现了组件间的松耦合通信。第三层十几项配置 插槽把界面换成你的品牌这一层解决的是看起来不像别人的组件。options对象提供了 13 个外观配置项从标题、主题色到气泡的左右背景色全部覆盖配置项默认值作用botTitleChatbot面板标题栏显示的机器人名字colorScheme#1b53d0气泡按钮和标题栏的主题色bubbleBtnSize56右下角悬浮按钮的尺寸(px)botAvatarImgplaceholder 图机器人头像msgBubbleBgBot/msgBubbleBgUser#f0f0f0 / #4356e0左右气泡背景色inputPlaceholderMessage输入框占位提示inputDisablePlaceholdernull输入框禁用时显示的提示文字animationtrue设为false可关闭所有动画如果颜色还不够vue-bot-ui还提供了 5 个插槽header标题栏、actions发送按钮旁加表情/附件按钮、sendButton换成文字发送键、bubbleButton替换整个悬浮按钮、botTyping自定义正在输入动画。连插槽都满足不了你的时候所有内部元素都有独立的qkb-前缀 class直接写 CSS 覆盖即可——最后的兜底方案永远是样式。一个完整的小案例电商客服的问题分流把三层能力串起来看一个接近真实的落地场景。小林要做的功能是用户进来先看到欢迎语然后机器人给出三个问题分类按钮用户选择后输入框恢复机器人模拟查询后给出结果。配置与消息数据data () { return { messageData: [], botTyping: false, inputDisable: false, botOptions: { botTitle: 智能客服, colorScheme: #1890ff, botAvatarImg: require(./assets/bot.png), msgBubbleBgBot: #f6f6f6, msgBubbleBgUser: #1890ff, inputPlaceholder: 请输入你的问题…, inputDisablePlaceholder: 请先选择上面的选项 } } }处理逻辑methods: { // 面板打开时发出欢迎语并带两个正在输入延时模拟真实对话 onInit () { this.botTyping true setTimeout(() { this.botTyping false this.messageData.push({ agent: bot, type: button, text: 请选择你要咨询的问题类型, disableInput: true, options: [ { text: 订单查询, value: order_query, action: postback }, { text: 退换货, value: return_exchange, action: postback }, { text: 商品咨询, value: product_consult, action: postback } ] }) }, 800) }, onMsgSend (value) { // 先回显用户消息 this.messageData.push({ agent: user, type: text, text: value.text }) // 用户点的按钮会把 value 字段带过来这里可以直接交给后端 this.botTyping true setTimeout(() { this.botTyping false this.inputDisable false this.messageData.push({ agent: bot, type: text, text: value.value order_query ? 您的订单正在加急处理中预计 24 小时内更新物流。 : 已为您转接人工客服请稍候… }) }, 1000) } }模板部分只需在VueBotUI上绑定initonInit、msg-sendonMsgSend、:bot-typing和:input-disable。从欢迎语到选项分流再到输入框的禁用以外的整个状态切换全部由messageData和两个布尔值驱动——这就是整个组件的使用范式套用到任意业务场景都成立。新手常见问题与避坑指南Q1这个组件支持 Vue 3 吗当前版本基于 Vue 2.6 构建Vue 3 项目暂不兼容。如果你是 Vue 3 用户需要找基于 Composition API 的替代方案或自行封装。Q2想显示消息时间怎么办在消息对象里加一个createdAt字段即可气泡下方会渲染这段文本参考src/components/MessageBubble/Main.vue。注意它是原样展示的字符串格式化需要你自己处理。Q3为什么点击按钮后输入框还开着disableInput是消息级字段只在该条消息渲染时生效。如果你希望点完按钮后一直锁定输入要在msg-send回调里同步维护:input-disable这个 prop或者在下一条按钮消息里再次声明disableInput: true。组件内部并不会替你记忆之前的禁用状态。Q4按钮选项的action只有两种吗是的目前action: url渲染为外链按钮action: postback会触发msg-send。作者在 TODO 里计划给按钮增加target属性支持暂时只能二选一。Q5跑官方 demo 报错确认 Node 版本与 Vue CLI 4 兼容yarn serve默认端口是 1901如果被占用会提示你换端口属正常现象。资源地图与下一步行动到这里你其实已经把vue-bot-ui的核心用了一遍。剩下的就是按图索骥去读源码、做二次开发完整可运行示例src/App.vue官方用法参考含事件绑定、消息构建的完整闭环。组件源码主组件src/components/BotUI.vue面板三大件在src/components/Board/消息气泡在src/components/MessageBubble/。事件常量src/config/index.js定义了botui-open/botui-close/botui-toggle三个事件名。样式覆盖入口src/assets/scss/所有qkb-前缀的 class 都在这里声明。如果你需要本地跑起来体验克隆仓库执行git clone https://gitcode.com/gh_mirrors/vu/vue-bot-ui yarn install yarn serve也请对它的边界保持清醒目前只支持文本和按钮两种消息类型视频、图片气泡仍在 TODO 清单上自动化测试和可访问性优化也尚未完成。如果你的场景需要复杂富媒体消息流它暂时还撑不住——但做客服入口 选项引导 文本问答这类常见形态它足够轻巧够用。下一次接到给项目加个聊天机器人的需求时不妨先让它上场。毕竟把时间留给真正有价值的业务逻辑才是组件的意义所在。【免费下载链接】vue-bot-uiFor the one who is finding a customizable chatbot UI.项目地址: https://gitcode.com/gh_mirrors/vu/vue-bot-ui创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考