vue advanced chat
2.1.0
Genießen ?
Eine progressive Webanwendung, die alle Funktionen der vue-advanced-chat Komponente präsentiert.
Gebaut mit Firestore, Vuetify und Push -Benachrichtigungen.
Wenn Sie Premium -Zugriff auf den Quellcode der Real World -Beispiel erhalten möchten, kontaktieren Sie mich bitte per E -Mail.
Sie erhalten eine vollständig funktionierende Chat -Anwendung für Web und Mobile:
# Using npm
npm install --save vue-advanced-chat
# Using yarn
yarn add vue-advanced-chat
# Using CDN
< script src= " https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-advanced-chat.umd.js " ></script > Registrieren Sie vue-advanced-chat und emoji-picker als Webkomponenten in Ihrer Konfigurationsdatei:
compilerOptions: {
isCustomElement : tagName => {
return tagName === 'vue-advanced-chat' || tagName === 'emoji-picker'
}
}Demo: https://github.com/advanced-that/vue-advanced-chat-sandbox/tree/main
Demo: https://github.com/advanced-chat/vue-advanced-chat-sandbox/tree/react
Demo: https://github.com/advanced-that/vue-advanced-chat-sandbox/tree/angular
< template >
< vue-advanced-chat
: current-user-id = "currentUserId"
:rooms = "JSON.stringify(rooms)"
: messages = "JSON.stringify(messages)"
: room - actions = "JSON.stringify(roomActions)"
/ >
</ template >
< script >
import { register } from 'vue-advanced-chat'
register()
// Or if you used CDN import
// window['vue-advanced-chat'].register()
export default {
data ( ) {
return {
currentUserId : '1234' ,
rooms : [ ] ,
messages : [ ] ,
roomActions : [
{ name : 'inviteUser' , title : 'Invite User' } ,
{ name : 'removeUser' , title : 'Remove User' } ,
{ name : 'deleteRoom' , title : 'Delete Room' }
]
}
}
}
</ script > vue-advanced-chat Komponente ist leistungsorientiert. Daher müssen Sie bestimmte Regeln einhalten, damit sie ordnungsgemäß funktioniert.
push -Methode // DO THIS
const rooms = [ ]
for ( let i = 0 ; i < res . length ; i ++ ) {
rooms . push ( res )
}
this . rooms = rooms
// DON'T DO THIS
for ( let i = 0 ; i < res . length ; i ++ ) {
this . rooms . push ( res )
} // DO THIS
this . rooms [ i ] . typingUsers = [ ... this . rooms [ i ] . typingUsers , typingUserId ]
// DON'T DO THIS
this . rooms [ i ] . typingUsers . push ( typingUserId ) // DO THIS
this . rooms [ roomIndex ] = room
this . rooms = [ ... this . rooms ]
// DON'T DO THIS
this . rooms [ roomIndex ] = room
// AND DON'T DO THIS
this . rooms . push ( room )messagesLoaded , indem Sie jedes Mal, wenn ein neuer Raum abgerufen wird fetchMessages ( { room , options } ) {
this . messagesLoaded = false
// use timeout to imitate async server fetched data
setTimeout ( ( ) => {
this . messages = [ ]
this . messagesLoaded = true
} )
} Wenn Sie Vue 3 verwenden, können Sie Array- und Objekt -Requisiten normal übergeben: DOM -Eigenschaften in Vue 3 übergeben
Andernfalls müssen Sie diese Requisiten als Saiten übergeben. Zum Beispiel: [messages]="JSON.stringify(messages)"
Stütze | Typ | Erforderlich | Standard |
|---|---|---|---|
height | Saite | - - | 600px |
current-user-id (1) | Saite | true | - - |
rooms | [String, Array] | - - | [] |
rooms-order | desc / asc | - - | desc |
loading-rooms (2) | Boolean | - - | false |
rooms-loaded (3) | Boolean | - - | false |
room-id (4) | Saite | - - | null |
load-first-room (5) | Boolean | - - | true |
rooms-list-opened | Boolean | - - | true |
custom-search-room-enabled (6) | Boolean | - - | false |
messages | [String, Array] | - - | [] |
room-message (7) | Saite | - - | null |
username-options (8) | [String, Objekt] | - - | {minUsers: 3, currentUser: false} |
messages-loaded (9) | Boolean | - - | false |
room-actions (10) | [String, Array] | - - | [] |
menu-actions (11) | [String, Array] | - - | [] |
message-actions (12) | [String, Array] | - - | (11) |
message-selection-actions (13) | [String, Array] | - - | (13) |
templates-text (14) | [String, Array] | - - | null |
auto-scroll (15) | [String, Objekt] | - - | { send: { new: true, newAfterScrollUp: true }, receive: { new: true, newAfterScrollUp: false } } |
show-search | Boolean | - - | true |
show-add-room | Boolean | - - | true |
show-send-icon | Boolean | - - | true |
show-files | Boolean | - - | true |
show-audio | Boolean | - - | true |
audio-bit-rate | Nummer | - - | 128 |
audio-sample-rate | Nummer | - - | 44100 |
show-emojis | Boolean | - - | true |
show-reaction-emojis | Boolean | - - | true |
show-new-messages-divider (16) | Boolean | - - | true |
show-footer (17) | Boolean | - - | true |
text-messages (18) | [String, Objekt] | - - | null |
text-formatting (19) | [String, Objekt] | - - | {disabled: false, italic: '_', bold: '*', strike: '~', underline: '°', multilineCode: '```', inlineCode: ' '} ` |
link-options (20) | [String, Objekt] | - - | { disabled: false, target: '_blank', rel: null } |
room-info-enabled (21) | Boolean | - - | false |
textarea-action-enabled (22) | Boolean | - - | false |
textarea-auto-focus | Boolean | - - | true |
user-tags-enabled | Boolean | - - | true |
emojis-suggestion-enabled | Boolean | - - | true |
media-preview-enabled | Boolean | - - | true |
responsive-breakpoint (23) | Nummer | - - | 900 |
single-room (24) | Boolean | - - | false |
scroll-distance (25) | Nummer | - - | 60 |
theme (26) | light / dark | - - | light |
accepted-files (27) | Saite | - - | * |
capture-files (28) | Saite | - - | '' |
multiple-files (29) | Boolean | - - | true |
styles (30) | [String, Objekt] | - - | (26) |
show-audio (31) | Boolean | - - | true |
emoji-data-source | Saite | - - | https://cdn.jsdelivr.net/npm/emoji-picker-element-data@%5E1/en/emojibase/data.json |
(1) current-user-id ist erforderlich, um die Benutzeroberfläche anzuzeigen und Aktionen entsprechend dem Benutzer aus dem Chat zu auslösen (z. B. die Position der Nachrichten rechts usw.).
(2) loading-rooms können verwendet werden, um ein Spinner-Symbol anzuzeigen/auszublenden, während die Räume geladen werden
(3) rooms-loaded müssen auf true gesetzt werden, wenn alle Räume geladen wurden. Dies bedeutet, dass der Benutzer nicht scrollen kann, um mehr paginierte Räume zu laden
(4) room-id kann verwendet werden, um einen bestimmten Raum jederzeit zu laden
(5) load-first-room kann verwendet werden, um das Standardverhalten des Öffnens des ersten Raums bei der Initialisierung zu entfernen
(6) custom-search-room-enabled kann verwendet werden, um die Suchzimmer-Veranstaltung zu verwenden, um Ihre eigene Methode anzurufen, um Räume herauszufiltern
(7) room-message kann verwendet werden, um einen Standard-Textbereichswert hinzuzufügen
(8) username-options können verwendet werden, um Raummeldungen Benutzername gemäß der minimalen Anzahl von minUsers in einem Raum anzuzeigen/auszublenden currentUser
(9) messages-loaded müssen auf true gesetzt werden, wenn alle Nachrichten einer Konversation geladen wurden. Dies bedeutet, dass der Benutzer nicht nach oben scrollen kann, um mehr paginierte Nachrichten zu laden
(10) room-actions können verwendet werden, um Ihre eigenen Schaltflächen anzuzeigen, wenn Sie auf das Dropdown-Symbol jedes Raums in der Liste der Räume klicken.
Sie können dann das Room-Action-Handler-Ereignis verwenden, um Ihre eigene Aktion aufzurufen, nachdem Sie auf eine Schaltfläche geklickt haben. Ex:
room - actions = "[
{
name : 'archiveRoom' ,
title : 'Archive Room'
}
] " (11) menu-actions können verwendet werden, um Ihre eigenen Schaltflächen anzuzeigen, wenn Sie auf das Symbol der vertikalen Punkte in einem Raum klicken.
Sie können dann das Menü-Action-Handler-Ereignis verwenden, um Ihre eigene Aktion aufzurufen, nachdem Sie auf eine Schaltfläche geklickt haben. Ex:
menu - actions = "[
{
name : 'inviteUser' ,
title : 'Invite User'
} ,
{
name : 'removeUser' ,
title : 'Remove User'
} ,
{
name : 'deleteRoom' ,
title : 'Delete Room'
}
] " (12) message-actions können verwendet werden, um Ihre eigenen Schaltflächen anzuzeigen, wenn Sie auf das Dropdown-Symbol in einer Nachricht klicken.
Sie können dann das Message-Action-Handler-Ereignis verwenden, um Ihre eigene Aktion aufzurufen, nachdem Sie auf eine Schaltfläche geklickt haben. Ex:
message - actions = "[
{
name : 'addMessageToFavorite' ,
title : 'Add To Favorite'
} ,
{
name : 'shareMessage' ,
title : 'Share Message'
}
] " Sie können integrierte message-actions verwenden, um beim Klicken spezifische UI-Änderungen auszulösen.
Gegenwärtig sind replyMessage , editMessage und deleteMessage von Aktionsnamen verfügbar.
Wenn messageActions nicht festgelegt ist, wird die folgenden Standardwerte verwendet.
Wenn Sie dieses Menü messageActions nicht anzeigen möchten, können Sie es ein leeres Array übergeben.
messageActions = "[
{
name : 'replyMessage' ,
title : 'Reply'
} ,
{
name : 'editMessage' ,
title : 'Edit Message' ,
onlyMe : true
} ,
{
name : 'deleteMessage' ,
title : 'Delete Message' ,
onlyMe : true
} ,
{
name : 'selectMessages' ,
title : 'Select'
}
] " (13) message-selection-actions bezieht sich auf die obige selectMessages -Nachrichtenaktion. Sie können es verwenden, um bei der Auswahl einer Nachricht benutzerdefinierte Aktionsschaltflächen im Raumkopf anzuzeigen. Ex:
messageActions="[
{
name: 'deleteMessages',
title: 'Delete'
},
{
name: 'forwardMessages',
title: 'Forward'
}
]"
(14) templates-text kann verwendet werden, um beim Eingeben / im Raum Textbereich automatische Vorlagen des Vorlagens hinzuzufügen. Ex:
templatesText = "[
{
tag : 'help' ,
text : 'This is the help'
} ,
{
tag : 'action' ,
text : 'This is the action'
}
] " (15) auto-scroll kann verwendet werden, um das Auto-Scroll-Verhalten beim Senden/Empfangen einer Nachricht zu ändern. Ex:
auto - scroll = "{
send : {
new : true , // will scroll down after sending a message
newAfterScrollUp : false // will not scroll down after sending a message when scrolled up
} ,
receive : {
new : false , // will not scroll down when receiving a message
newAfterScrollUp : true // will scroll down when receiving a message when scrolled up
}
} " (16) show-new-messages-divider kann verwendet werden, um den Blue Line-Teiler zwischen gesehenen und unsichtbaren Nachrichten zu zeigen/zu verbergen.
(17) show-footer kann verwendet werden, um die Raumfußzeile zu verbergen. Zum Beispiel, um Benutzer zu verhindern, dass sie Nachrichten oder Medien senden.
(18) text-messages können verwendet werden, um die Standard-I18N-Texte zu ersetzen. Ex:
text - messages = "{
ROOMS_EMPTY : 'Aucune conversation' ,
ROOM_EMPTY : 'Aucune conversation sélectionnée' ,
NEW_MESSAGES : 'Nouveaux messages' ,
MESSAGE_DELETED : 'Ce message a été supprimé' ,
MESSAGES_EMPTY : 'Aucun message' ,
CONVERSATION_STARTED : 'La conversation a commencée le :' ,
TYPE_MESSAGE : 'Tapez votre message' ,
SEARCH : 'Rechercher' ,
IS_ONLINE : 'est en ligne' ,
LAST_SEEN : 'dernière connexion ' ,
IS_TYPING : 'est en train de taper...' ,
CANCEL_SELECT_MESSAGE : 'Annuler Sélection'
} " (19) text-formatting kann verwendet werden, um die Textformatierung hinzuzufügen. Fett, kursiv, kursiv, Streik, Untersteuer-, Inline -Code- und Multiline -Code -Formatierung sind derzeit verfügbar und können in Verbindung verwendet werden.
:text-formatting="{disabled: true}" übergeben.:text-formatting="{italic: '^'}":text-formatting="{bold: null}"| Stil | Syntax | Beispiel | Ausgabe |
|---|---|---|---|
| Deutlich | * * | *This is bold text* | Das ist mutiger Text |
| Kursiv | _ _ | _This text is italicized_ | Dieser Text wird kursivisiert |
| Schlägen | ~ ~ | ~This was mistaken text~ | |
| Unterstreichen | ° ° | °This text is underlined° | Dieser Text ist unterstrichen |
| Verschachtelte Formatierung | * * Und _ _ | *This text is _extremely_ important* | Dieser Text ist äußerst wichtig |
Inline -Code
Beispiel: `Dies ist Inline -Code`
Ausgabe: This is inline code
Multiline -Code
Beispiel: `` `Dies ist Multiline Code``````
Ausgabe:
This is
multiline code (20) link-options können verwendet werden, um URL-Links in Nachrichten zu deaktivieren oder URLs-Ziel zu ändern. Ex:
: link - options = "{ disabled: true, target: '_self', rel: null }" . room-info-enabled
Sie können dann mit dem Raum-Info-Ereignis Ihre eigene Aktion anrufen, nachdem Sie auf den Header geklickt haben.
(22) textarea-action-enabled kann verwendet werden, um ein zusätzliches Symbol rechts im Textbereich hinzuzufügen
Sie können dann das textArea-action-Handler-Ereignis verwenden, um nach dem Klicken auf das Symbol Ihre eigene Aktion aufzurufen.
(23) responsive-breakpoint kann verwendet werden, um die Liste der Räume links zusammenzubrechen, wenn die Ansichtsfenstergröße unter die angegebene Breite geht.
(24) single-room kann verwendet werden, wenn Sie die Liste der Zimmer links nie anzeigen möchten. Sie müssen noch die rooms als Array mit einem einzigen Element übergeben.
(25) scroll-distance kann verwendet werden, um die Anzahl der Pixel zu ändern, bevor das Ereignis fetchMessages ausgelöst wird, wenn Sie nach oben scrollen, um mehr Nachrichten zu laden, oder das Ereignis fetchMoreRooms ausgelöst wird, wenn Sie nach unten scrollen, um mehr Räume zu laden.
(26) theme kann verwendet werden, um das Chat -Thema zu ändern. Derzeit sind nur light und dark erhältlich.
(27) accepted-files können verwendet werden, um Einzelpersonen-Dateitypen in Chat festzulegen. Standardmäßig sind alle Dateitypen zulässig: "*" .
Beispiel: Setzen Sie accepted-files="image/png, image/jpeg, application/pdf" um JPG PNG und PDF Dateien nur zuzulassen
(28) capture-files können verwendet werden, um die direkte Aufnahme von Fotos und Videos in mobilen Browsern zu ermöglichen, anstatt vorhandene Fotos und Videos, die sich bereits auf dem Gerät befinden, nur hochzuladen. Weitere Informationen und anerkannte Werte finden Sie hier. Standardmäßig wird das Attribut weggelassen und mobile Browser bieten nur die Galerie zur Auswahl von Fotos und Videos an. Hinweis: Dies wirkt sich nur auf Dateianhänge aus. Audiomeldungen werden immer mit dem Mikrofon des Geräts aufgezeichnet.
(29) multiple-files können verwendet werden, um zu definieren, ob mehrere Dateiauswahlen akzeptiert werden. Standardmäßig ist dies wahr.
(30) styles können verwendet werden, um Ihr eigenes Thema anzupassen. Hier finden Sie die vollständige Liste
(31) show-audio kann verwendet werden, um das Audio-Symbol zu aktivieren oder zu deaktivieren
styles = "{
general : {
color : '#0a0a0a' ,
colorSpinner : '#333' ,
borderStyle : '1px solid #e1e4e8'
} ,
footer : {
background : '#f8f9fa' ,
backgroundReply : 'rgba(0, 0, 0, 0.08)'
} ,
icons : {
search: '#9ca6af'
}
} "Ihre Requisiten müssen einer bestimmten Struktur folgen, um Räume und Nachrichten korrekt anzuzeigen:
rooms = "[
{
roomId : '1' ,
roomName : 'Room 1' ,
avatar : 'assets/imgs/people.png' ,
unreadCount : 4 ,
index : 3 ,
lastMessage : {
_id : 'xyz' ,
content : 'Last message received' ,
senderId : '1234' ,
username : 'John Doe' ,
timestamp : '10:20' ,
saved : true ,
distributed : false ,
seen : false ,
new : true
} ,
users : [
{
_id : '1234' ,
username : 'John Doe' ,
avatar : 'assets/imgs/doe.png' ,
status : {
state : 'online' ,
lastChanged : 'today, 14:30'
}
} ,
{
_id : '4321' ,
username : 'John Snow' ,
avatar : 'assets/imgs/snow.png' ,
status : {
state : 'offline' ,
lastChanged : '14 July, 20:00'
}
}
] ,
typingUsers : [ 4321 ]
}
] " Wenn Sie die index hinzufügen, werden Ihre Zimmer mit diesem Wert bestellt. index kann jeder sortierbare Wert sein, wie eine string , datetime , timestamp usw.
Für jeden Raumbenutzer können Sie die status hinzufügen, die den state und lastChanged Eigenschaften aufbewahren kann:
state kann 'online' oder 'offline' seinlastChanged ist das Datum, an dem state zuletzt geändert wurde. typingUsers ist eine Reihe aller Benutzer, die derzeit eine Nachricht schreiben
Nachrichtenobjekte werden je nach Typ unterschiedlich gemacht. Text, Emoji, Bild, Video und Dateitypen werden unterstützt.
Jedes Nachrichtenobjekt verfügt über ein senderId -Feld, das die ID des entsprechenden Agenten enthält. Wenn senderId mit der currentUserId Propitur übereinstimmt, werden bestimmte Benutzeroberflächen und Aktionen implementiert.
Anmerkungen:
username wird in jeder Nachricht der entsprechenden Agenten angezeigt, wenn mindestens 3 Benutzer im Raum sindsystem wird verwendet, um Nachrichten mit einer bestimmten zentrierten Anzeige anzuzeigenindexId kann verwendet werden, wenn Sie eine Nachrichten -ID ändern müssen, die bereits in einem Raum angezeigt wird, wodurch ein Animationsfehler verhindert wird. Wenn Sie beispielsweise nicht im Voraus wissen, wird die Nachrichten -ID Ihr Backend erstellt.Nachricht heißt:
saved: true One Checkmarkdistributed: true zwei Checkmarksseen: true Two Blue Checkmarksdeleted: true Grey -Hintergrund mit gelöschter Nachrichtentextfailure: true rot klickbarer Fehlersymbol messages = "[
{
_id : '7890' ,
indexId : 12092 ,
content : 'Message 1' ,
senderId : '1234' ,
username : 'John Doe' ,
avatar : 'assets/imgs/doe.png' ,
date : '13 November' ,
timestamp : '10:20' ,
system : false ,
saved : true ,
distributed : true ,
seen : true ,
deleted : false ,
failure : true ,
disableActions : false ,
disableReactions : false ,
files : [
{
name : 'My File' ,
size : 67351 ,
type : 'png' ,
audio : true ,
duration : 14.4 ,
url : 'https://firebasestorage.googleapis.com/...' ,
preview : 'data:image/png;base64,iVBORw0KGgoAA...' ,
progress : 88
}
] ,
reactions : {
? : [
'1234' , // USER_ID
'4321'
] ,
? : [
'1234'
]
} ,
replyMessage : {
content : 'Reply Message' ,
senderId : '4321' ,
files : [
{
name : 'My Replied File' ,
size : 67351 ,
type : 'png' ,
audio : true ,
duration : 14.4 ,
url : 'https://firebasestorage.googleapis.com/...' ,
preview : 'data:image/png;base64,iVBORw0KGgoAA...'
}
]
} ,
}
] " Ereignis | Parameter | Feuert beim Benutzer aus |
|---|---|---|
fetch-messages (1) | { room, options } | Scrollt oben, um weitere Nachrichten zu laden |
fetch-more-rooms (2) | - - | Scrollt, um mehr Räume zu laden |
send-message | { roomId, content, files(11), replyMessage(12), usersTag } | Eine Nachricht gesendet |
edit-message | { roomId, messageId, newContent, files(11), replyMessage(12) ,usersTag } | Eine Nachricht bearbeitet |
delete-message | { roomId, message } | Eine Nachricht gelöscht |
open-file | { message, file } | Klicken Sie auf, um eine Datei anzuzeigen oder herunterzuladen |
open-user-tag (3) | { user } | Klicken Sie auf ein Benutzer -Tag in einer Nachricht |
open-failed-message | { roomId, message } | Klicken Sie auf das Fehlersymbol neben einer Nachricht |
add-room | - - | Klicken Sie auf das Plus -Symbol neben der Searchbar |
search-room (4) | { roomId, value } | Tippte einen Charakter in die Raumsuche Eingabe |
room-action-handler (5) | { roomId, action } | Klickte auf das senkrechte Punktsymbol in einem Raum |
menu-action-handler (6) | { roomId, action } | Klickte auf das senkrechte Punktsymbol in einem Raum |
message-action-handler (7) | { roomId, action, message } | Klicken Sie auf das Dropdown -Symbol in einer Nachricht |
message-selection-action-handler (8) | { roomId, action, messages } | Klicken Sie auf die Schaltfläche Auswahl in einer Nachricht |
send-message-reaction | { roomId, messageId, reaction, remove } | Klicken Sie in einer Nachricht auf das Emoji -Symbol |
room-info (9) | room | Klickte auf die Zimmerkopfleiste |
toggle-rooms-list | { opened } | Klickte auf das Umschaltungssymbol in einem Raumheader |
textarea-action-handler (10) | { roomId, message } | Klickte auf das benutzerdefinierte Symbol im Fußzeile |
typing-message | { roomId, message } | Begann eine Nachricht zu tippen |
(1) fetch-messages wird jedes Mal ausgelöst, wenn ein Raum geöffnet wird. Wenn der Raum zum ersten Mal geöffnet wird, hält der options reset: true .
(1) fetch-messages sollten eine Methode sein, die ein Paginationssystem implementiert. Sein Ziel ist es, ältere Nachrichten einer Konversation zu laden, wenn der Benutzer oben scrollt.
(2) fetch-more-rooms wird beim Scrollen der Räume ausgelöst und sollte eine Methode zur Implementierung eines Paginationssystems sein.
(3) open-user-tag wird beim Klicken auf ein Benutzer-Tag in einer Nachricht ausgelöst. Beim Erstellen eines Benutzer -Tags durch Eingeben @ in der Fußzeile TextArea und das Senden der Nachricht wird das Tag mit dem folgenden Muster identifiziert:
< usertag > TAGGED_USER_ID </ usertag > Dadurch klickt das Tag in einer Nachricht. Beispiel: Message Tag Inhalt
send-message und edit-message Ereignisse erledigen dieses Muster für Sie und übergeben es im content .
(4) room-action-handler ist das Ergebnis der room-actions .
Wenn Sie auf eine Schaltfläche von Ihrem room-actions Array klicken, gibt Ihnen room-action-handler den Namen der Schaltfläche, auf die Sie klicken. Dann können Sie alles tun, was Sie wollen. Ex:
menuActionHandler ( { roomId , action } ) {
switch ( action . name ) {
case 'archiveRoom' :
// call a method to archive the room
}
} (5) menu-action-handler ist das Ergebnis der menu-actions Requisiten.
Wenn Sie auf eine Schaltfläche von Ihrem menu-actions Array klicken, gibt Ihnen menu-action-handler den Namen der Schaltfläche, auf die Sie klicken. Dann können Sie alles tun, was Sie wollen. Ex:
menuActionHandler ( { roomId , action } ) {
switch ( action . name ) {
case 'inviteUser' :
// call a method to invite a user to the room
case 'removeUser' :
// call a method to remove a user from the room
case 'deleteRoom' :
// call a method to delete the room
}
} (6) search-room kann durch die Verwendung von custom-search-room-enabled der Lage sein. Auf diese Weise können Sie Ihre eigene Methode anrufen, um durchsuchte Räume herauszufiltern.
(7) message-action-handler ist das Ergebnis der message-actions Prop.
Wenn Sie auf eine Schaltfläche von Ihrem message-actions Array klicken, gibt Ihnen message-action-handler den Namen der Klickschaltfläche und die entsprechenden Nachrichtendaten. Dann können Sie alles tun, was Sie wollen. Ex:
messageActionHandler ( { roomId , action , message } ) {
switch ( action . name ) {
case 'addMessageToFavorite' :
// call a method to add a message to the favorite list
case 'shareMessage' :
// call a method to share the message with another user
}
} (8) message-selection-action-handler ist das Ergebnis der message-selection-actions Prop.
Wenn Sie auf eine Schaltfläche von Ihrem Array message-selection-actions message-selection-action-handler den Namen der Klickschaltfläche und die entsprechenden ausgewählten Nachrichtendaten. Dann können Sie alles tun, was Sie wollen. Ex:
messageSelectionActionHandler ( { roomId , action , message } ) {
switch ( action . name ) {
case 'deleteMessages' :
// call a method to delete selected messaged
case 'shareMessage' :
// call a method to share selected messaged with another user
}
} (9) room-info ist das Ergebnis der room-info-enabled Requisite.
(10) textarea-action-handler ist das Ergebnis der textarea-action-enabled Prop.
(11) Array von Dateien, bei denen jede Datei enthält: { blob, localUrl, name, size, type, extension }
(12) replyMessage -Objekt ist verfügbar, wenn der Benutzer auf eine andere Nachricht antwortete, indem er auf das entsprechende Symbol klickte und die angeklickten Nachrichteninformationen enthält.
Beispiel:
< vue-advanced-chat >
< div slot = "room-header" >
This is a new room header
</ div >
< div v-for = "message in messages" : slot = "'message_' + message._id" >
< div v-if = "message.system" >
System message: { { message . content } }
</ div >
< div v-else >
Normal message: { { message . content } }
</ div >
</ div >
< div v-for = "message in messages" : slot = "'message-avatar_' + message._id" >
New Avatar
</ div >
</ vue-advanced-chat > Slot | Aktion |
|---|---|
custom-action-icon | Fügen Sie ein benutzerdefiniertes Symbol in die Fußzeile hinzu |
rooms-header | Fügen Sie eine Vorlage über die Räume hinzu (über der Suchleiste). |
room-list-item_{{ROOM_ID}} | Ersetzen Sie die Vorlage der Raumlistenelemente |
room-list-info_{{ROOM_ID}} | Ersetzen Sie die Informationen der Zimmerlistenelemente |
room-list-avatar_{{ROOM_ID}} | Ersetzen Sie den Avatar der Zimmerlistenelemente |
room-list-options_{{ROOM_ID}} | Ersetzen Sie die Vorlage der List Room -Optionen |
room-list-options-icon_{{ROOM_ID}} | Ersetzen Sie das Dropdown -Symbol für Raumlistenoptionen |
rooms-header | Ersetzen Sie den Inhalt über der Suchleiste |
rooms-list-search | Ersetzen Sie die Suchleiste |
room-header | Ersetzen Sie die Vorlage des Raumkopfs |
room-header-avatar | Ersetzen Sie die Schablone des Raumkopfs Avatar |
room-header-info | Ersetzen Sie die Vorlage des Raumkopf -Textes |
room-options | Ersetzen Sie die Vorlage der Raumoptionen |
message_{{MESSAGE_ID}} | Ersetzen Sie die Vorlage des Felds der Nachricht (und der Systemmeldung) |
message-avatar_{{MESSAGE_ID}} | Ersetzen Sie die Vorlage des Nachricht Avatar |
message-failure_{{MESSAGE_ID}} | Ersetzen Sie das Symbol für den Meldungsfehler |
messages-empty | Ersetzen Sie die leere Nachrichtenvorlage |
rooms-empty | Ersetzen Sie die Vorlage für leere Räume |
no-room-selected | Ersetzen Sie die ausgewählte Vorlage ohne Raum |
menu-icon | Ersetzen Sie das Menüsymbol im Raum |
toggle-icon | Ersetzen Sie das Symbol für Umkippungsraumliste |
spinner-icon-rooms | Ersetzen Sie das Lade -Spinner -Symbol in der Liste der Räume |
spinner-icon-infinite-rooms | Ersetzen Sie das Ladespinner -Symbol, um mehr Räume zu laden |
spinner-icon-messages | Ersetzen Sie das Ladespinner -Symbol in einem Raum |
spinner-icon-infinite-messages | Ersetzen Sie das Lade -Spinner -Symbol, um weitere Nachrichten zu laden |
spinner-icon-room-file | Ersetzen Sie das Lade -Spinner -Symbol, um schwere Dateien zu laden |
spinner-icon-message-file_{{MESSAGE_ID}} | Ersetzen Sie das Lade -Spinner -Symbol in einer Nachricht mit einem Bild |
scroll-icon | Ersetzen Sie das Scroll in das neueste Nachrichtensymbol |
reply-close-icon | Ersetzen Sie die Antwortschließungs Symbol |
image-close-icon | Ersetzen Sie das Bildschließungssymbol |
file-icon | Ersetzen Sie das Dateisymbol |
files-close-icon | Ersetzen Sie das Dateischließungssymbol |
edit-close-icon | Ersetzen Sie das Symbol Schließen des Bearbeitens |
preview-close-icon | Ersetzen Sie das Medienvorschau -Schließ -Symbol |
emoji-picker-icon | Ersetzen Sie das Emoji Picker -Symbol |
emoji-picker-reaction-icon_{{MESSAGE_ID}} | Ersetzen Sie das Emoji Picker -Reaktionsymbol (im Meldungsfeld) |
paperclip-icon | Ersetzen Sie das Papierklammer -Symbol |
send-icon | Ersetzen Sie das Meldungssymbol Senden |
eye-icon_{{MESSAGE_ID}} | Ersetzen Sie das Augensymbol (Bildnachricht) |
document-icon_{{MESSAGE_ID}} | Ersetzen Sie das Dokumentsymbol |
pencil-icon_{{MESSAGE_ID}} | Ersetzen Sie das Bleistiftsymbol |
checkmark-icon_{{MESSAGE_ID}} | Ersetzen Sie das Checkmark -Symbol einer Nachricht |
checkmark-icon_{{ROOM_ID}} | Ersetzen Sie das Checkmark -Symbol einer Nachricht aus der Rooms -Liste |
deleted-icon_{{MESSAGE_ID}} | Ersetzen Sie das gelöschte Symbol einer Nachricht |
deleted-icon_{{ROOM_ID}} | Ersetzen Sie das gelöschte Symbol einer Nachricht aus der Räumeliste |
microphone-icon_{{ROOM_ID}} | Ersetzen Sie das Mikrofon -Symbol |
dropdown-icon_{{MESSAGE_ID}} | Ersetzen Sie das Dropdown -Symbol |
search-icon | Ersetzen Sie das Suchsymbol |
add-icon | Ersetzen Sie das Raumsymbol hinzufügen |
audio-stop-icon | Ersetzen Sie das Audio Recorder -Stop -Symbol |
audio-check-icon | Ersetzen Sie das Audio -Rekorder bestätigen das Symbol |
audio-pause-icon_{{MESSAGE_ID}} | Ersetzen Sie das Symbol zur Meldungs -Audio -Pause |
audio-play-icon_{{MESSAGE_ID}} | Ersetzen Sie das Audio -Play -Symbol |
Sie finden den Quellcode, um eine vollständige Chat -App mit Firebase/Firestore im demo -Ordner zu implementieren.
Um es mit Ihrem eigenen FireBase -Projekt zu testen:
git clone https://github.com/advanced-chat/vue-advanced-chat.gitdemo/src/database/index.js ersetzen Sie die Zeile const config = ... durch Ihre eigene Firebase -Konfigurationdemo -Ordner und führen Sie npm run serve aus Wenn Sie sich für den gleichen Code wie im demo -Ordner entscheiden, um Ihre Chat -App zu erstellen, müssen Sie über eine bestimmte Firestore -Datenstruktur verfügen.
Um Ihnen den Einstieg zu erleichtern, habe ich in demo/src/App.vue eine Methode hinzugefügt addData um einige Daten in Ihrer Firestore -Datenbank zu initialisieren.
users: {
USER_ID_1 : {
_id : '1' ,
username : 'User 1'
} ,
USER_ID_2 : {
_id : '2' ,
username : 'User 2'
} ,
USER_ID_3 : {
_id : '3' ,
username : 'User 2'
}
} chatRooms: {
ROOM_ID_1 : {
users : [ '1' , '3' ]
} ,
ROOM_ID_2 : {
users : [ '1' , '2' , '3' ]
}
} messages: {
MESSAGE_ID_1 : {
content : 'My first message to <usertag>John</usertag>' ,
senderId : '2' ,
timestamp : 'December 11, 2019 at 4:00:00 PM' ,
seen : true
}
} Ihre Hilfe wird immer geschätzt
Dieses Projekt ist unter MIT -Lizenz lizenziert
