5分鐘跑通 vue-bot-ui聊天機(jī)器人界面完整實(shí)戰(zhàn)上手指南【免費(fèi)下載鏈接】vue-bot-uiFor the one who is finding a customizable chatbot UI.項(xiàng)目地址: https://gitcode.com/gh_mirrors/vu/vue-bot-ui上個月產(chǎn)品經(jīng)理丟給我一句話給商城主頁加個聊天機(jī)器人界面下周就要能演示。我第一反應(yīng)是擼起袖子自己寫結(jié)果兩天過去光是把消息氣泡、輸入框、展開動畫調(diào)順就讓我頭皮發(fā)麻。最后靠 vue-bot-ui 這個開箱即用、快速集成、高度可定制的 Vue.js 組件庫半小時就交了差。這篇就聊聊我怎么從零把它跑起來以及中間踩過的那些坑希望能幫你少走點(diǎn)彎路。三步跑通從安裝到屏幕上出現(xiàn)第一個對話框別慌整個過程真沒有技術(shù)含量三步走完瀏覽器里就能看到右下角那個聊天小氣泡。**第一步裝包。**一條命令的事npm install vue-bot-ui # 或者用 yarn add vue-bot-ui**第二步引入并注冊組件。**在任意 Vue 組件里把它掛上就行import { VueBotUI } from vue-bot-ui export default { components: { VueBotUI } }**第三步把組件丟進(jìn)模板。**它長這樣VueBotUI :messagesmessageData :optionsbotOptions msg-sendhandleSend /到這一步頁面右下角已經(jīng)出現(xiàn)那個懸浮的聊天按鈕了。但點(diǎn)開你會發(fā)現(xiàn)里面空空的——因?yàn)?messages 還是空數(shù)組。所以還得寫個處理器讓第一條消息能飛進(jìn)面板handleSend(value) { // 先把用戶消息塞進(jìn)面板不然界面上啥也看不見 this.messageData.push({ agent: user, type: text, text: value.text }) // 假裝機(jī)器人思考一秒再回一句 setTimeout(() { this.messageData.push({ agent: bot, type: text, text: 收到我這就幫您查。 }) }, 1000) }是不是很省事從安裝到第一條對話我實(shí)際花了不到五分鐘剩下的時間全花在研究怎么把它改得不像默認(rèn)樣。核心概念逐個擊破四個詞看懂整個組件初看源碼目錄 src/components/ 你可能有點(diǎn)懵其實(shí)核心就四個概念我用大白話講給你聽。消息氣泡就是聊天面板里的一條條消息類似微信的對話格子區(qū)別是你能隨便給它換皮膚。它的數(shù)據(jù)結(jié)構(gòu)長這樣{ agent: bot, // 誰發(fā)的bot 或 user type: text, // 氣泡類型text / button text: 請問您想咨詢什么, disableInput: false // 這條消息期間要不要鎖住輸入框 }選項(xiàng)按鈕可以理解為給用戶準(zhǔn)備的快捷回復(fù)。當(dāng)機(jī)器人拋出幾個選項(xiàng)用戶就不用打字直接點(diǎn)就行。實(shí)現(xiàn)方式是 type 換成 button再帶上 options 數(shù)組{ agent: bot, type: button, text: 請選擇您的問題類型, disableInput: true, // 等待用戶點(diǎn)按鈕時把輸入框鎖住 options: [ { text: 查訂單, value: order_query, action: postback }, { text: 申請售后, value: after_sale, action: postback } ] }注意這里的actionpostback表示把選項(xiàng)值回傳給后端url則會直接打開一個鏈接別搞混了。輸入面板就是底部那個輸入框和發(fā)送按鈕對應(yīng) Board 目錄下的 Action 組件。它的開關(guān)、占位符文案都能通過配置項(xiàng)控制。配置項(xiàng)是一大坨 options 對象主題色、頭像、氣泡顏色、動畫開關(guān)全在這里。默認(rèn)值在 src/config/index.js 里躺著隨時可以翻。這幾個概念一理清你再看 src/App.vue 的示例代碼基本就無障礙了。改頭換面三組配置做出三種完全不同的風(fēng)格高度可定制不是嘴上說說。下面三套配置我直接復(fù)制粘貼換主題五分鐘變一個樣子。想試哪套把整個 options 對象貼進(jìn)代碼就行。商務(wù)藍(lán)適合正經(jīng)公司官網(wǎng)botOptions: { botTitle: 智能客服, colorScheme: #1b53d0, textColor: #fff, msgBubbleBgBot: #f0f2f7, msgBubbleBgUser: #1b53d0, inputPlaceholder: 請輸入您的問題… }暖色客服風(fēng)做電商、社區(qū)這類親和力優(yōu)先的站點(diǎn)很合適botOptions: { botTitle: 小暖, colorScheme: #ff7a59, botAvatarImg: require(./assets/bot.png), boardContentBg: #fff8f3, msgBubbleBgBot: #ffe8d9, msgBubbleBgUser: #ff7a59, inputPlaceholder: 跟我聊聊吧 }暗黑極客風(fēng)給工具類產(chǎn)品或者程序員圈子用還挺帶感的botOptions: { botTitle: Shell, colorScheme: #0f1117, textColor: #00ff9c, boardContentBg: #0f1117, msgBubbleBgBot: #1a1d27, msgBubbleColorBot: #c8ffd8, msgBubbleBgUser: #00ff9c, msgBubbleColorUser: #000, animation: false }看到?jīng)]十幾個配置項(xiàng)一組合氣質(zhì)完全不一樣。嫌默認(rèn)的懸浮按鈕大bubbleBtnSize改數(shù)字就行不想要動畫animation: false直接關(guān)掉。真實(shí)項(xiàng)目實(shí)戰(zhàn)給電商站做個售前導(dǎo)購助手光說不練假把式。我把 vue-bot-ui 用到真實(shí)的電商售前場景里給大家講講過程。需求很樸素用戶點(diǎn)開氣泡機(jī)器人先打招呼然后引導(dǎo)用戶選品類、查優(yōu)惠。坑一窗口打開了機(jī)器人卻一言不發(fā)。排查半天發(fā)現(xiàn)原來要監(jiān)聽init事件——窗口每次打開都會觸發(fā)它得在這里安排開場白botStart() { // 窗口一打開就顯示正在輸入別讓用戶對著白屏發(fā)呆 this.botTyping true setTimeout(() { this.botTyping false this.messageData.push({ agent: bot, type: text, text: 您好我是售前小助手想看電腦還是手機(jī) }) }, 800) }坑二用戶發(fā)消息后界面卡死機(jī)器人永遠(yuǎn)不回復(fù)。這是我犯過最蠢的錯誤——只記得 push 用戶消息忘了把正在輸入關(guān)掉。botTyping這個 prop 就是干這個的接完消息一定要記得復(fù)位不然三個點(diǎn)會一直轉(zhuǎn)handleSend(value) { this.messageData.push({ agent: user, type: text, text: value.text }) this.botTyping true // 顯示正在輸入 // 這里假裝請求后端接口 setTimeout(() { this.botTyping false // 別忘了關(guān)掉 this.messageData.push({ agent: bot, type: button, text: 想先看哪個, disableInput: true, options: [ { text: 輕薄本, value: ultrabook, action: postback }, { text: 游戲本, value: gaming, action: postback } ] }) }, 1000) }一個意外的驚喜用戶點(diǎn)選項(xiàng)按鈕走的居然也是msg-send這個事件參數(shù)就是那個選項(xiàng)對象。所以只要在 handleSend 里判斷value.value是ultrabook還是gaming就能分流到不同的業(yè)務(wù)邏輯一套處理函數(shù)全搞定不用再單獨(dú)寫監(jiān)聽。常見問題速查五個問題幫你省掉翻文檔的時間Q想讓聊天窗口打開頁面就自動彈出來怎么做A兩個 prop 組合用is-open設(shè)為 trueopen-delay填毫秒數(shù)控制延遲比如頁面加載后 500 毫秒彈出。VueBotUI :is-opentrue :open-delay500 ... /Q點(diǎn)了選項(xiàng)按鈕之后輸入框被鎖死了怎么解鎖A這不是 bug是設(shè)計(jì)。輸入框的鎖定狀態(tài)由消息里的disableInput字段控制等你推送下一條disableInput: false的消息它自然就恢復(fù)輸入了。Q我想在頁面其他地方比如導(dǎo)航欄控制窗口開關(guān)行不行A可以。組件在 document 上監(jiān)聽三個全局事件你直接派發(fā)就行document.dispatchEvent(new Event(botui-open)) // 打開 document.dispatchEvent(new Event(botui-close)) // 關(guān)閉 document.dispatchEvent(new Event(botui-toggle)) // 切換Q發(fā)送按鈕、頭部、輸入框旁邊的圖標(biāo)能換嗎A能組件暴露了sendButton、header、actions、bubbleButton、botTyping等插槽想換什么直接往插槽里塞自定義內(nèi)容。Q樣式怎么改都不滿意還有退路嗎A有。每個類型和狀態(tài)都有獨(dú)立的 CSS 類名比如.qkb-msg-bubble--bot直接覆蓋樣式就行相當(dāng)于給你留了把萬能鑰匙。寫在最后所以 vue-bot-ui 到底幫你省了什么省掉了畫氣泡、調(diào)動畫、寫輸入框、做響應(yīng)式這一整套重復(fù)勞動讓你把精力全花在接后端接口、設(shè)計(jì)對話流程這些真正有業(yè)務(wù)價值的事情上。剩下那些邊邊角角的個性化需求改配置、寫插槽、覆樣式三條路任你選。心動的話直接克隆倉庫 https://gitcode.com/gh_mirrors/vu/vue-bot-ui 跑一遍示例把 src/App.vue 里的代碼改成你自己的場景十分鐘后你也能擁有一套拿得出手的聊天機(jī)器人界面。別光看動手試試吧?！久赓M(fèi)下載鏈接】vue-bot-uiFor the one who is finding a customizable chatbot UI.項(xiàng)目地址: https://gitcode.com/gh_mirrors/vu/vue-bot-ui創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考