vue beautiful chat
v2.5.0
vue-beautiful-chat bietet ein Intercom-ähnliches Chatfenster, das einfach und kostenlos in jedes Projekt eingebunden werden kann. Es bietet keine Nachrichtenfunktionen, sondern nur die Ansichtskomponente.
vue-beautiful-chat wird auf vue von react-beautiful-chat portiert (das Sie hier finden können)
Gehen Sie zu FAQ
$ 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 ;
}
}
}Ausführlichere Beispiele finden Sie im Demo-Ordner.
Launcher ist die einzige Komponente, die zur Verwendung von vue-beautiful-chat benötigt wird. Es reagiert dynamisch auf Änderungen in Nachrichten. Alle neuen Nachrichten müssen über eine Änderung der Requisiten hinzugefügt werden, wie im Beispiel gezeigt.
| Stütze | Typ | Beschreibung |
|---|---|---|
| *Teilnehmer | [agentProfile] | Stellt die Kundendienstmitarbeiter Ihres Produkts oder Ihrer Dienstleistung dar. Felder für jeden Agenten: ID, Name, Bild-Url |
| *onMessageWasSent | Funktion (Nachricht) | Wird aufgerufen, wenn eine Nachricht mit dem Nachrichtenobjekt als Argument gesendet wird. |
| *istOffen | Boolescher Wert | Der boolesche Wert gibt an, ob das Chatfenster geöffnet sein soll oder nicht. |
| *offen | Funktion | Die an die Komponente übergebene Funktion, die den oben erwähnten Bool-Schalter zum Öffnen des Chats verändert |
| *schließen | Funktion | Die an die Komponente übergebene Funktion, die den oben erwähnten Bool-Schalter zum Schließen des Chats mutiert |
| Nachrichtenliste | [Nachricht] | Ein Array von Nachrichtenobjekten, die als Konversation gerendert werden sollen. |
| Emoji anzeigen | Boolescher Wert | Ein boolescher Wert, der angibt, ob die Emoji-Schaltfläche angezeigt werden soll oder nicht |
| showFile | Boolescher Wert | Ein boolescher Wert, der angibt, ob die Schaltfläche zur Dateiauswahl angezeigt werden soll oder nicht |
| showDeletion | Boolescher Wert | Ein boolescher Wert, der angibt, ob die Schaltfläche „Bearbeiten“ für eine Nachricht angezeigt werden soll oder nicht |
| ShowEdition | Boolescher Wert | Ein boolescher Wert, der angibt, ob die Schaltfläche „Löschen“ für eine Nachricht angezeigt werden soll oder nicht |
| showTypingIndicator | Zeichenfolge | Eine Zeichenfolge, die auf die Teilnehmer-ID eines Benutzers festgelegt werden kann, um ihm einen typing anzuzeigen |
| showHeader | Boolescher Wert | Ein boolescher Wert, der angibt, ob der Header von Chatwindow angezeigt werden soll oder nicht |
| disableUserListToggle | Boolescher Wert | Ein boolescher Wert, der angibt, ob der Benutzer zwischen Nachrichtenliste und Teilnehmerliste wechseln darf oder nicht |
| Farben | Objekt | Ein Objekt, das die Spezifikationen der Farben enthält, die zum Lackieren der Komponente verwendet werden. Siehe hier |
| messageStyling | Boolescher Wert | Ein boolescher Wert, der angibt, ob msgdown Unterstützung für die Nachrichtenformatierung im Chat aktiviert werden soll oder nicht. Siehe hier |
| Ereignis | Parameter | Beschreibung |
|---|---|---|
| onType | undefiniert | Wird ausgelöst, wenn der Benutzer die Nachrichteneingabe eingibt |
| bearbeiten | message | Wird ausgelöst, nachdem der Benutzer die Nachricht bearbeitet hat |
Ersetzen des Standardheaders.
< template v-slot : header >
? Good chat between {{participants.map(m=>m.name).join(' & ')}}
</ template > Benutzer-Avatar ersetzen. Parameter: 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 > Markdown für Textnachricht ändern. Parameter: message
< template v-slot : text-message-body = " { message } " >
< small style = " background : red " v-if = " message.meta " >
{{message.meta}}
</ small >
{{message.text}}
</ template > Markdown für Systemnachricht ändern. Parameter: message
< template v-slot : system-message-body = " { message } " >
[System]: {{message.text}}
</ template > Nachrichtenobjekte werden je nach Typ unterschiedlich gerendert. Derzeit werden nur Text-, Emoji- und Dateitypen unterstützt. Jedes Nachrichtenobjekt verfügt über ein author , das den Wert „me“ oder die ID des entsprechenden Agenten haben kann.
{
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'
}
}
} Beim Senden einer Nachricht können Sie eine Reihe von Sätzen angeben, die im Benutzerchat als Schnellantworten angezeigt werden. Durch Hinzufügen eines suggestions mit dem Wert eines String-Arrays zum Nachrichtenobjekt wird diese Funktionalität ausgelöst
{
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
Öffnen Sie eine neue Shell im selben Ordner
cd demo
yarn install # this installs the demo dependencies
yarn dev # this starts the dev server at http://localhost:8080
yarn build im Stammverzeichnis auf, um die Bibliothek mit Ihren neuesten Änderungen zu kompilieren 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 " />Dies ist die rote Variante. Bitte überprüfen Sie diese Datei auf die Liste der Varianten, die auf der Demoseite online angezeigt werden.
Bitte beachten Sie, dass Sie ein Objekt übergeben müssen, das jede einzelne Farbeigenschaft enthält, andernfalls schlägt die Validierung fehl.
Gute Nachrichten, die Nachrichtenformatierung wurde bereits für Sie hinzugefügt. Sie können es aktivieren, indem Sie messageStyling auf true setzen und dann die msgdown-Bibliothek verwenden. Sie können die Formatierungsunterstützung jederzeit aktivieren/deaktivieren oder Benutzern die Möglichkeit geben, dies jederzeit zu tun.
@a-kriya, @mattmezza
Bitte kontaktieren Sie uns, wenn Sie als Mitwirkender mitmachen möchten .
