vue beautiful chat
v2.5.0
vue-beautiful-chat предоставляет окно чата, похожее на интерком, которое можно легко включить в любой проект бесплатно. Он не предоставляет никаких средств обмена сообщениями, только компонент представления.
vue-beautiful-chat портируется на vue react-beautiful-chat (который вы можете найти здесь)
Перейти к часто задаваемым вопросам
$ 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 ;
}
}
}Более подробные примеры см. в папке demo.
Launcher — единственный компонент, необходимый для использования vue-beautiful-chat. Он будет динамически реагировать на изменения в сообщениях. Все новые сообщения необходимо добавлять посредством изменения реквизитов, как показано в примере.
| опора | тип | описание |
|---|---|---|
| *участники | [профиль агента] | Представляет агентов по обслуживанию клиентов вашего продукта или услуги. Поля для каждого агента: id, name, imageUrl. |
| *onMessageWasSent | функция (сообщение) | Вызывается, когда сообщение отправляется с объектом сообщения в качестве аргумента. |
| *Открыто | логическое значение | Логическое значение, указывающее, должно ли быть открыто окно чата. |
| *открыть | Функция | Функция, переданная компоненту, который изменяет вышеупомянутый логический переключатель для открытия чата. |
| *закрывать | Функция | Функция, передаваемая компоненту, который изменяет вышеупомянутый логический переключатель для закрытия чата. |
| список сообщений | [сообщение] | Массив объектов сообщений, которые будут отображаться как диалог. |
| показатьEmoji | логическое значение | Логическое значение, указывающее, показывать или нет кнопку эмодзи. |
| показатьфайл | логическое значение | Логическое значение, указывающее, показывать или нет кнопку выбора файла. |
| showDeletion | логическое значение | Логическое значение, указывающее, показывать или нет кнопку редактирования для сообщения. |
| showEdition | логическое значение | Логическое значение, указывающее, показывать или нет кнопку удаления для сообщения. |
| showTypingIndicator | Нить | Строка, которой можно задать значение участника.id пользователя, чтобы отображать для него индикатор typing . |
| шоухедер | логическое значение | Логическое значение, указывающее, показывать или нет заголовок окна чата. |
| отключитьUserListToggle | логическое значение | Логическое значение, указывающее, разрешено ли пользователю переключаться между списком сообщений и списком участников. |
| цвета | Объект | Объект, содержащий характеристики цветов, используемых для окраски компонента. Смотрите здесь |
| сообщениеСтилизация | логическое значение | Логическое значение, указывающее, следует ли включать поддержку msgdown для форматирования сообщений в чате. Смотрите здесь |
| событие | параметры | описание |
|---|---|---|
| onType | неопределенный | Срабатывает, когда пользователь вводит сообщение |
| редактировать | 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 , которое может иметь значение «я» или идентификатор соответствующего агента.
{
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
Откройте новую оболочку в той же папке
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
Пожалуйста, свяжитесь с нами, если вы хотите присоединиться в качестве автора .
