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
如果您想作为贡献者加入，请联系我们。
