vue beautiful chat
v2.5.0
vue-beautiful-chat提供了一個類似對講機的聊天窗口，可以輕鬆免費地包含在任何專案中。它不提供訊息傳遞功能，僅提供視圖元件。
vue-beautiful-chat正在移植到react-beautiful-chat的 vue（你可以在這裡找到）
前往常見問題解答
$ yarn add vue-beautiful-chat
import Chat from 'vue-beautiful-chat'
Vue . use ( Chat ) < template >
< div >
< beautiful-chat
:participants = " participants "
:titleImageUrl = " titleImageUrl "
:onMessageWasSent = " onMessageWasSent "
:messageList = " messageList "
:newMessagesCount = " newMessagesCount "
:isOpen = " isChatOpen "
:close = " closeChat "
:icons = " icons "
:open = " openChat "
:showEmoji = " true "
:showFile = " true "
:showEdition = " true "
:showDeletion = " true "
:showTypingIndicator = " showTypingIndicator "
:showLauncher = " true "
:showCloseButton = " true "
:colors = " colors "
:alwaysScrollToBottom = " alwaysScrollToBottom "
:disableUserListToggle = " false "
:messageStyling = " messageStyling "
@onType = " handleOnType "
@edit = " editMessage " />
</ div >
</ template > export default {
name : 'app' ,
data ( ) {
return {
participants : [
{
id : 'user1' ,
name : 'Matteo' ,
imageUrl : 'https://avatars3.githubusercontent.com/u/1915989?s=230&v=4'
} ,
{
id : 'user2' ,
name : 'Support' ,
imageUrl : 'https://avatars3.githubusercontent.com/u/37018832?s=200&v=4'
}
] , // the list of all the participant of the conversation. `name` is the user name, `id` is used to establish the author of a message, `imageUrl` is supposed to be the user avatar.
titleImageUrl : 'https://a.slack-edge.com/66f9/img/avatars-teams/ava_0001-34.png' ,
messageList : [
{ type : 'text' , author : `me` , data : { text : `Say yes!` } } ,
{ type : 'text' , author : `user1` , data : { text : `No.` } }
] , // the list of the messages to show, can be paginated and adjusted dynamically
newMessagesCount : 0 ,
isChatOpen : false , // to determine whether the chat window should be open or closed
showTypingIndicator : '' , // when set to a value matching the participant.id it shows the typing indicator for the specific user
colors : {
header : {
bg : '#4e8cff' ,
text : '#ffffff'
} ,
launcher : {
bg : '#4e8cff'
} ,
messageList : {
bg : '#ffffff'
} ,
sentMessage : {
bg : '#4e8cff' ,
text : '#ffffff'
} ,
receivedMessage : {
bg : '#eaeaea' ,
text : '#222222'
} ,
userInput : {
bg : '#f4f7f9' ,
text : '#565867'
}
} , // specifies the color scheme for the component
alwaysScrollToBottom : false , // when set to true always scrolls the chat to the bottom when new events are in (new message, user starts typing...)
messageStyling : true // enables *bold* /emph/ _underline_ and such (more info at github.com/mattezza/msgdown)
}
} ,
methods : {
sendMessage ( text ) {
if ( text . length > 0 ) {
this . newMessagesCount = this . isChatOpen ? this . newMessagesCount : this . newMessagesCount + 1
this . onMessageWasSent ( { author : 'support' , type : 'text' , data : { text } } )
}
} ,
onMessageWasSent ( message ) {
// called when the user sends a message
this . messageList = [ ... this . messageList , message ]
} ,
openChat ( ) {
// called when the user clicks on the fab button to open the chat
this . isChatOpen = true
this . newMessagesCount = 0
} ,
closeChat ( ) {
// called when the user clicks on the botton to close the chat
this . isChatOpen = false
} ,
handleScrollToTop ( ) {
// called when the user scrolls message list to top
// leverage pagination for loading another page of messages
} ,
handleOnType ( ) {
console . log ( 'Emit typing event' )
} ,
editMessage ( message ) {
const m = this . messageList . find ( m => m . id === message . id ) ;
m . isEdited = true ;
m . data . text = message . data . text ;
}
}
}有關更詳細的範例，請參閱演示資料夾。
Launcher是使用 vue-beautiful-chat 所需的唯一組件。它將對訊息的變化做出動態反應。所有新訊息都必須透過更改 props 添加，如範例所示。
| 支柱 | 類型 | 描述 |
|---|---|---|
| *參加者 | [代理簡介] | 代表您的產品或服務的客戶服務代理。每個代理的欄位：id、name、imageUrl |
| *訊息已發送 | 功能（訊息） | 當以訊息物件作為參數發送訊息時調用。 |
| *已開放 | 布林值 | 指示是否應開啟聊天視窗的布林值。 |
| *打開 | 功能 | 傳遞給元件的函數會改變上述布林切換以開啟聊天 |
| *關閉 | 功能 | 傳遞給元件的函數會改變上述布林切換以關閉聊天 |
| 訊息清單 | [訊息] | 要呈現為對話的訊息物件陣列。 |
| 顯示表情符號 | 布林值 | 一個布林值，指示是否顯示表情符號按鈕 |
| 顯示文件 | 布林值 | 一個布林值，指示是否顯示文件選擇器按鈕 |
| 顯示刪除 | 布林值 | 一個布林值，指示是否顯示訊息的編輯按鈕 |
| 顯示版本 | 布林值 | 一個布林值，指示是否顯示訊息的刪除按鈕 |
| 顯示打字指示器 | 細繩 | 可以設定為使用者的participant.id的字串，以顯示他們的typing指示符 |
| 顯示標題 | 布林值 | 一個布林值，指示是否顯示聊天視窗的標題 |
| 停用使用者清單切換 | 布林值 | 一個布林值，指示是否允許使用者在訊息列表和參與者列表之間切換 |
| 顏色 | 目的 | 包含用於繪製組件的顏色規格的物件。看這裡 |
| 訊息樣式 | 布林值 | 一個布林值，指示是否在聊天中啟用msgdown對訊息格式的支援。看這裡 |
| 事件 | 參數 | 描述 |
|---|---|---|
| 類型 | 不明確的 | 當使用者在訊息輸入上鍵入時觸發 |
| 編輯 | message | 用戶編輯訊息後觸發 |
替換預設標頭。
< template v-slot : header >
? Good chat between {{participants.map(m=>m.name).join(' & ')}}
</ template >更換用戶頭像。參數： message 、 user
< template v-slot : user-avatar = " { message , user } " >
< div style = " border-radius : 50 % ; color : pink ; font-size : 15 px ; line-height : 25 px ; text-align : center ; background : tomato ; width : 25 px !important ; height : 25 px !important ; min-width : 30 px ; min-height : 30 px ; margin : 5 px ; font-weight : bold " v-if = " message.type === 'text' && user && user.name " >
{{user.name.toUpperCase()[0]}}
</ div >
</ template >更改簡訊的降價。參數： message
< template v-slot : text-message-body = " { message } " >
< small style = " background : red " v-if = " message.meta " >
{{message.meta}}
</ small >
{{message.text}}
</ template >更改系統訊息的降價。參數： message
< template v-slot : system-message-body = " { message } " >
[System]: {{message.text}}
</ template >訊息對像根據其類型的不同而呈現不同的方式。目前僅支援文字、表情符號和文件類型。每個訊息物件都有一個author字段，其值為“me”或相應代理的 id。
{
author : 'support' ,
type : 'text' ,
id : 1 , // or text '1'
isEdited : false ,
data : {
text : 'some text' ,
meta : '06-16-2019 12:43'
}
}
{
author : 'me' ,
type : 'emoji' ,
id : 1 , // or text '1'
isEdited : false ,
data : {
code : 'someCode'
}
}
{
author : 'me' ,
type : 'file' ,
id : 1 , // or text '1'
isEdited : false ,
data : {
file : {
name : 'file.mp3' ,
url : 'https:123.rf/file.mp3'
}
}
} 發送訊息時，您可以提供一組句子，這些句子將作為快速回應顯示在用戶聊天中。在訊息物件中新增一個帶有字串陣列值的suggestions欄位將觸發此功能
{
author : 'support' ,
type : 'text' ,
id : 1 , // or text '1'
data : {
text : 'some text' ,
meta : '06-16-2019 12:43'
} ,
suggestions : [ 'some quick reply' , ... , 'another one' ]
} git clone [email protected]:mattmezza/vue-beautiful-chat.git
cd vue-beautiful-chat
yarn install # this installs the package dependencies
yarn watch # this watches files to continuously compile them
在同一資料夾中開啟一個新 shell
cd demo
yarn install # this installs the demo dependencies
yarn dev # this starts the dev server at http://localhost:8080
yarn build在根目錄上，以使用您的最新更改來編譯庫 let redColors = {
header : {
bg : '#D32F2F' ,
text : '#fff'
} ,
launcher : {
bg : '#D32F2F'
} ,
messageList : {
bg : '#fff'
} ,
sentMessage : {
bg : '#F44336' ,
text : '#fff'
} ,
receivedMessage : {
bg : '#eaeaea' ,
text : '#222222'
} ,
userInput : {
bg : '#fff' ,
text : '#212121'
}
} < beautiful-chat
...
: colors = " redColors " />這是紅色變體。請檢查此文件以取得線上示範頁面中顯示的變體清單。
請注意，您需要傳遞一個包含每個顏色屬性的對象，否則驗證將會失敗。
好消息，訊息格式已為您新增。您可以透過將messageStyling設為true來啟用它，並且您將使用 msgdown 庫。您可以隨時啟用/停用格式支持，也可以讓使用者隨時執行此操作。
@a-kriya，@mattmezza
如果您想作為貢獻者加入，請聯絡我們。
