vue advanced chat
2.1.0
Apprécier ?
Une application Web progressive présentant toutes les fonctionnalités du composant vue-advanced-chat .
Construit avec Firestore, Vuetify et Push Notifications.
Si vous souhaitez obtenir un accès premium au code source d'exemple du monde réel, veuillez me contacter par e-mail.
Vous obtiendrez une application de chat entièrement fonctionnelle pour le Web et le 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 > Enregistrez vue-advanced-chat et emoji-picker comme composants Web dans votre fichier de configuration:
compilerOptions: {
isCustomElement : tagName => {
return tagName === 'vue-advanced-chat' || tagName === 'emoji-picker'
}
}Demo: https://github.com/advanced-chat/vue-advanced-chat-sandbox/tree/main
Démo: https://github.com/advanced-chat/vue-advanced-chat-sandbox/tree/react
Demo: https://github.com/advanced-chat/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 > Le composant vue-advanced-chat est axé sur les performances, vous devez donc suivre des règles spécifiques pour que cela fonctionne correctement.
push // 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 à chaque fois qu'une nouvelle salle est récupérée fetchMessages ( { room , options } ) {
this . messagesLoaded = false
// use timeout to imitate async server fetched data
setTimeout ( ( ) => {
this . messages = [ ]
this . messagesLoaded = true
} )
} Si vous utilisez Vue 3, vous pouvez passer des accessoires de tableau et d'objet normalement: passer des propriétés DOM dans Vue 3
Sinon, vous devez passer ces accessoires comme des cordes. Par exemple: [messages]="JSON.stringify(messages)"
Soutenir | Taper | Requis | Défaut |
|---|---|---|---|
height | Chaîne | - | 600px |
current-user-id (1) | Chaîne | true | - |
rooms | [String, Array] | - | [] |
rooms-order | desc / asc | - | desc |
loading-rooms (2) | Booléen | - | false |
rooms-loaded (3) | Booléen | - | false |
room-id (4) | Chaîne | - | null |
load-first-room (5) | Booléen | - | true |
rooms-list-opened | Booléen | - | true |
custom-search-room-enabled (6) | Booléen | - | false |
messages | [String, Array] | - | [] |
room-message (7) | Chaîne | - | null |
username-options (8) | [String, objet] | - | {minUsers: 3, currentUser: false} |
messages-loaded (9) | Booléen | - | 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, objet] | - | { send: { new: true, newAfterScrollUp: true }, receive: { new: true, newAfterScrollUp: false } } |
show-search | Booléen | - | true |
show-add-room | Booléen | - | true |
show-send-icon | Booléen | - | true |
show-files | Booléen | - | true |
show-audio | Booléen | - | true |
audio-bit-rate | Nombre | - | 128 |
audio-sample-rate | Nombre | - | 44100 |
show-emojis | Booléen | - | true |
show-reaction-emojis | Booléen | - | true |
show-new-messages-divider (16) | Booléen | - | true |
show-footer (17) | Booléen | - | true |
text-messages (18) | [String, objet] | - | null |
text-formatting (19) | [String, objet] | - | {disabled: false, italic: '_', bold: '*', strike: '~', underline: '°', multilineCode: '```', inlineCode: ' '}` |
link-options (20) | [String, objet] | - | { disabled: false, target: '_blank', rel: null } |
room-info-enabled (21) | Booléen | - | false |
textarea-action-enabled (22) | Booléen | - | false |
textarea-auto-focus | Booléen | - | true |
user-tags-enabled | Booléen | - | true |
emojis-suggestion-enabled | Booléen | - | true |
media-preview-enabled | Booléen | - | true |
responsive-breakpoint (23) | Nombre | - | 900 |
single-room (24) | Booléen | - | false |
scroll-distance (25) | Nombre | - | 60 |
theme (26) | light / dark | - | light |
accepted-files (27) | Chaîne | - | * |
capture-files (28) | Chaîne | - | '' |
multiple-files (29) | Booléen | - | true |
styles (30) | [String, objet] | - | (26) |
show-audio (31) | Booléen | - | true |
emoji-data-source | Chaîne | - | https://cdn.jsdelivr.net/npm/emoji-picker-element-data@%5E1/en/emojibase/data.json |
(1) current-user-id est nécessaire pour afficher les actions de l'interface utilisateur et déclencher en fonction de l'utilisateur en utilisant le chat (Ex: Position des messages à droite, etc.)
(2) loading-rooms peuvent être utilisées pour afficher / masquer une icône de spinner pendant que les chambres se chargent
(3) rooms-loaded doivent être réglées sur true lorsque toutes les pièces ont été chargées. Ce qui signifie que l'utilisateur ne peut pas faire défiler pour charger plus de pièces paginées
(4) room-id peut être utilisé pour charger une pièce spécifique à tout moment
(5) load-first-room peut être utilisée pour supprimer le comportement par défaut de l'ouverture de la première pièce à l'initialisation
(6) custom-search-room-enabled peut être utilisée pour utiliser l'événement de la salle de recherche pour appeler votre propre méthode pour filtrer les chambres
(7) room-message peut être utilisé pour ajouter une valeur de texte par défaut
(8) username-options peuvent être utilisées pour afficher / masquer le nom d'utilisateur des messages de la salle en fonction du nombre minimum d'utilisateurs minUsers à l'intérieur d'une pièce, et si l'utilisateur du message est l'utilisateur actuel currentUser
(9) messages-loaded doivent être définis sur true lorsque tous les messages d'une conversation ont été chargés. Ce qui signifie que l'utilisateur ne peut pas faire défiler en haut pour charger plus de messages paginés
(10) room-actions peuvent être utilisées pour afficher vos propres boutons lorsque vous cliquez sur l'icône déroulante de chaque pièce à l'intérieur de la liste des chambres.
Vous pouvez ensuite utiliser l'événement de la salle d'action-action pour appeler votre propre action après avoir cliqué sur un bouton. Ex:
room - actions = "[
{
name : 'archiveRoom' ,
title : 'Archive Room'
}
] " (11) menu-actions peuvent être utilisées pour afficher vos propres boutons lorsque vous cliquez sur l'icône des points verticaux à l'intérieur d'une pièce.
Vous pouvez ensuite utiliser l'événement menu-action-main-handler pour appeler votre propre action après avoir cliqué sur un bouton. Ex:
menu - actions = "[
{
name : 'inviteUser' ,
title : 'Invite User'
} ,
{
name : 'removeUser' ,
title : 'Remove User'
} ,
{
name : 'deleteRoom' ,
title : 'Delete Room'
}
] " (12) message-actions peuvent être utilisées pour afficher vos propres boutons lorsque vous cliquez sur l'icône déroulante dans un message.
Vous pouvez ensuite utiliser l'événement Message-action-Handler pour appeler votre propre action après avoir cliqué sur un bouton. Ex:
message - actions = "[
{
name : 'addMessageToFavorite' ,
title : 'Add To Favorite'
} ,
{
name : 'shareMessage' ,
title : 'Share Message'
}
] " Vous pouvez utiliser des noms message-actions intégrés pour déclencher des modifications spécifiques de l'interface utilisateur lorsque vous cliquez sur.
Actuellement, des noms d'action replyMessage , editMessage et deleteMessage sont disponibles.
Si messageActions n'est pas défini, il utilisera les valeurs par défaut ci-dessous.
Si vous ne souhaitez pas afficher ce menu messageActions , vous pouvez lui passer un tableau vide.
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 sont liées à l'action de message selectMessages . Vous pouvez l'utiliser pour afficher les boutons d'action personnalisés dans l'en-tête de la pièce lors de la sélection d'un message. Ex:
messageActions="[
{
name: 'deleteMessages',
title: 'Delete'
},
{
name: 'forwardMessages',
title: 'Forward'
}
]"
(14) templates-text peut être utilisé pour ajouter du texte de modèles de saisie semi-automatique lors de la saisie / dans la pièce TextArea. Ex:
templatesText = "[
{
tag : 'help' ,
text : 'This is the help'
} ,
{
tag : 'action' ,
text : 'This is the action'
}
] " (15) auto-scroll peut être utilisé pour modifier le comportement de défilement automatique lors de l'envoi / réception d'un message. 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 peut être utilisé pour afficher / masquer le diviseur de ligne bleue entre les messages vus et invisibles.
(17) show-footer peut être utilisé pour cacher le pied de page de la pièce. Par exemple pour empêcher les utilisateurs d'envoyer un message ou un support.
(18) text-messages peuvent être utilisés pour remplacer les textes i18n par défaut. 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 peut être utilisé pour ajouter du formatage du texte. Bold, italique, strikethrough, soulignement, code en ligne et formatage de code multiline sont actuellement disponibles et peuvent être utilisés en conjonction.
:text-formatting="{disabled: true}" .:text-formatting="{italic: '^'}":text-formatting="{bold: null}"| Style | Syntaxe | Exemple | Sortir |
|---|---|---|---|
| Audacieux | * * | *This is bold text* | C'est du texte audacieux |
| Italique | _ _ | _This text is italicized_ | Ce texte est en italique |
| Strikethrough | ~ ~ | ~This was mistaken text~ | |
| Souligner | ° ° | °This text is underlined° | Ce texte est souligné |
| Formatage imbriqué | * * et _ _ | *This text is _extremely_ important* | Ce texte est extrêmement important |
Code en ligne
Exemple: «Ceci est en ligne de code»
Sortie: This is inline code
Code multiligne
Exemple: `` C'est un code multiline ''
Sortir:
This is
multiline code (20) link-options peuvent être utilisées pour désactiver les liens d'URL dans les messages ou modifier la cible des URL. Ex:
: link - options = "{ disabled: true, target: '_self', rel: null }" (21) room-info-enabled peut être utilisée pour déclencher un événement après avoir cliqué sur le composant de l'en-tête de la pièce.
Vous pouvez ensuite utiliser l'événement Room-Info pour appeler votre propre action après avoir cliqué sur l'en-tête.
(22) textarea-action-enabled peut être utilisé pour ajouter une icône supplémentaire à droite de TextArea
Vous pouvez ensuite utiliser l'événement TextArea-Action-Handler pour appeler votre propre action après avoir cliqué sur l'icône.
(23) responsive-breakpoint peut être utilisé pour effondrer la liste des chambres à gauche lorsque la taille de la fenêtre est en dessous de la largeur spécifiée.
(24) single-room peut être utilisée si vous ne voulez jamais afficher la liste des chambres à gauche. Vous avez toujours besoin de passer l'accessoire rooms en tant que tableau avec un seul élément.
(25) scroll-distance peut être utilisée pour modifier le nombre de pixels avant que l'événement fetchMessages ne soit déclenché lors du défilement vers le haut pour charger plus de messages, ou l'événement fetchMoreRooms est déclenché lors du défilement vers le bas pour charger plus de pièces.
(26) theme peut être utilisé pour modifier le thème du chat. Actuellement, seules light et dark sont disponibles.
(27) accepted-files peuvent être utilisés pour définir les types de fichiers spécifiques autorisés dans le chat. Par défaut, tous les types de fichiers sont autorisés: "*" .
Exemple: Définissez accepted-files="image/png, image/jpeg, application/pdf" pour autoriser uniquement les fichiers JPG PNG et PDF
(28) capture-files peuvent être utilisés pour permettre la capture directe des photos et des vidéos sur les navigateurs mobiles, au lieu de simplement télécharger des photos et des vidéos existantes qui sont déjà sur l'appareil. Voir ici pour plus d'informations et des valeurs reconnues. Par défaut, l'attribut est omis et les navigateurs mobiles n'offriront que la galerie pour choisir des photos et des vidéos. Remarque: Cela affecte uniquement les pièces jointes de fichiers. Les messages audio sont toujours enregistrés à l'aide du microphone de l'appareil.
(29) multiple-files peuvent être utilisés pour définir si plusieurs sélections de fichiers seront acceptées. Par défaut, c'est vrai.
(30) styles peuvent être utilisés pour personnaliser votre propre thème. Vous pouvez trouver la liste complète ici
(31) show-audio peut être utilisé pour activer ou désactiver l'icône audio
styles = "{
general : {
color : '#0a0a0a' ,
colorSpinner : '#333' ,
borderStyle : '1px solid #e1e4e8'
} ,
footer : {
background : '#f8f9fa' ,
backgroundReply : 'rgba(0, 0, 0, 0.08)'
} ,
icons : {
search: '#9ca6af'
}
} "Vos accessoires doivent suivre une structure spécifique pour afficher correctement les salles et les messages:
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 ]
}
] " Si vous ajoutez la propriété index , vos chambres seront commandées en utilisant cette valeur. index peut être n'importe quelle valeur triable, comme une string , datetime , timestamp , etc.
Pour chaque utilisateur de la salle, vous pouvez ajouter la propriété status , qui peut contenir l' state et les propriétés lastChanged :
state peut être 'online' ou 'offline'lastChanged est la date à laquelle state a été modifié pour la dernière fois. typingUsers est un tableau de tous les utilisateurs qui écrivent actuellement un message
Les objets de message sont rendus différemment en fonction de leur type. Les types de texte, d'emoji, d'image, de vidéo et de fichiers sont pris en charge.
Chaque objet de message a un champ senderId qui contient l'ID de l'agent correspondant. Si senderId correspond à currentUserId Prop, l'interface utilisateur et les actions spécifiques seront implémentées.
Notes:
username sera affiché sur chaque message d'agents correspondants si au moins 3 utilisateurs sont dans la sallesystem est utilisé pour afficher des messages avec un écran centré spécifiqueindexId peut être utilisé si vous devez modifier un ID de message qui est déjà affiché dans une pièce, ce qui empêche un problème d'animation. Par exemple, lorsque vous ne savez pas à l'avance, l'ID de message que votre backend créera.Message indique:
saved: true une cochedistributed: true deux marques de contrôleseen: true Two Blue Checkmarksdeleted: true fond gris avec texte de message suppriméfailure: true Icône de défaillance cliquable rouge 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...'
}
]
} ,
}
] " Événement | Paramètres | Incendie lorsqu'un utilisateur |
|---|---|---|
fetch-messages (1) | { room, options } | Faites défiler en haut pour charger plus de messages |
fetch-more-rooms (2) | - | Faire défiler pour charger plus de pièces |
send-message | { roomId, content, files(11), replyMessage(12), usersTag } | Envoyé un message |
edit-message | { roomId, messageId, newContent, files(11), replyMessage(12) ,usersTag } | Édité un message |
delete-message | { roomId, message } | Supprimé un message |
open-file | { message, file } | Cliqué pour afficher ou télécharger un fichier |
open-user-tag (3) | { user } | Cliqué sur une balise utilisateur dans un message |
open-failed-message | { roomId, message } | Cliqué sur l'icône de défaillance à côté d'un message |
add-room | - | Cliqué sur l'icône Plus à côté de la barre de recherche |
search-room (4) | { roomId, value } | Tapé un caractère dans l'entrée de recherche de la salle |
room-action-handler (5) | { roomId, action } | Cliqué sur l'icône des points verticaux à l'intérieur d'une pièce |
menu-action-handler (6) | { roomId, action } | Cliqué sur l'icône des points verticaux à l'intérieur d'une pièce |
message-action-handler (7) | { roomId, action, message } | Cliqué sur l'icône déroulante à l'intérieur d'un message |
message-selection-action-handler (8) | { roomId, action, messages } | Cliqué sur le bouton Sélectionner dans un message |
send-message-reaction | { roomId, messageId, reaction, remove } | Cliqué sur l'icône emoji à l'intérieur d'un message |
room-info (9) | room | Cliquez sur la barre d'en-tête de la pièce |
toggle-rooms-list | { opened } | Cliqué sur l'icône bascule à l'intérieur d'un en-tête de pièce |
textarea-action-handler (10) | { roomId, message } | Cliqué sur l'icône personnalisée à l'intérieur du pied de page |
typing-message | { roomId, message } | A commencé à taper un message |
(1) fetch-messages est déclenché chaque fois qu'une pièce est ouverte. Si la pièce est ouverte pour la première fois, les options Param conserveront reset: true .
(1) fetch-messages doit être une méthode implémentant un système de pagination. Son objectif est de charger des messages plus anciens d'une conversation lorsque l'utilisateur fait défiler sur le dessus.
(2) fetch-more-rooms est déclenché lors du défilement de la liste des chambres et devrait être une méthode implémentant un système de pagination.
(3) open-user-tag est déclenché lors de la cliquetis sur une balise utilisateur dans un message. Lors de la création d'une balise utilisateur en tapant @ dans le pied de page TextArea et en envoyant le message, la balise sera identifiée avec le modèle ci-dessous:
< usertag > TAGGED_USER_ID </ usertag > Cela rendra la balise cliquable dans un message. Ex: contenu de la balise de message
Les événements send-message et edit-message géreront ce modèle pour vous et le passeront dans le content Param.
(4) room-action-handler est le résultat de l'accessoire room-actions .
Lorsque vous cliquez sur un bouton à partir de votre tableau room-actions , room-action-handler vous donnera le nom du bouton qui était cliquer. Ensuite, vous pouvez faire tout ce que vous voulez. Ex:
menuActionHandler ( { roomId , action } ) {
switch ( action . name ) {
case 'archiveRoom' :
// call a method to archive the room
}
} (5) menu-action-handler est le résultat de l'action menu-actions .
Lorsque vous cliquez sur un bouton à partir de votre tableau menu-actions , menu-action-handler vous donnera le nom du bouton qui était cliquer. Ensuite, vous pouvez faire tout ce que vous voulez. 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 peut être activée en utilisant un accessoire custom-search-room-enabled . Cela vous permettra d'appeler votre propre méthode pour filtrer les chambres recherchées.
(7) message-action-handler est le résultat de l'action message-actions .
Lorsque vous cliquez sur un bouton à partir de votre tableau message-actions , message-action-handler vous donnera le nom du bouton qui a été cliqué et les données de message correspondantes. Ensuite, vous pouvez faire tout ce que vous voulez. 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 est le résultat de l'action message-selection-actions .
Lorsque vous cliquez sur un bouton à partir de votre tableau message-selection-actions , message-selection-action-handler vous donnera le nom du bouton qui clique et les données des messages sélectionnés correspondants. Ensuite, vous pouvez faire tout ce que vous voulez. 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 est le résultat de l'hélice room-info-enabled .
(10) textarea-action-handler est le résultat de l'hélice textarea-action-enabled .
(11) tableau de fichiers où chaque fichier contienne: { blob, localUrl, name, size, type, extension }
(12) L'objet replyMessage est disponible lorsque l'utilisateur a répondu à un autre message en cliquant sur l'icône correspondante et contient les informations de message qui ont été cliquées.
Exemple:
< 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 > Fente | Action |
|---|---|
custom-action-icon | Ajoutez une icône personnalisée à l'intérieur du pied de page |
rooms-header | Ajoutez un modèle en haut de la liste des pièces (au-dessus de la barre de recherche) |
room-list-item_{{ROOM_ID}} | Remplacez le modèle des éléments de la liste des pièces |
room-list-info_{{ROOM_ID}} | Remplacez les informations sur les éléments de la liste des pièces |
room-list-avatar_{{ROOM_ID}} | Remplacez l'avatar des éléments de la liste des pièces |
room-list-options_{{ROOM_ID}} | Remplacez le modèle des options de la salle de liste |
room-list-options-icon_{{ROOM_ID}} | Remplacez l'icône déroulante Options de la liste des chambres |
rooms-header | Remplacez le contenu au-dessus de la barre de recherche |
rooms-list-search | Remplacer la barre de recherche |
room-header | Remplacez le modèle de l'en-tête de la pièce |
room-header-avatar | Remplacez le modèle de l'avatar de l'en-tête de la pièce |
room-header-info | Remplacez le modèle du texte de l'en-tête de la pièce |
room-options | Remplacez le modèle des options de la pièce |
message_{{MESSAGE_ID}} | Remplacez le modèle de la boîte de message (et de message système) |
message-avatar_{{MESSAGE_ID}} | Remplacez le modèle de l'avatar du message |
message-failure_{{MESSAGE_ID}} | Remplacez l'icône de défaillance du message |
messages-empty | Remplacez le modèle de message vide |
rooms-empty | Remplacez le modèle de chambres vides |
no-room-selected | Remplacez le modèle sélectionné sans pièce |
menu-icon | Remplacez l'icône du menu de la pièce |
toggle-icon | Remplacez l'icône de la liste des salles à bascule |
spinner-icon-rooms | Remplacez l'icône de chargeur de chargement dans la liste des chambres |
spinner-icon-infinite-rooms | Remplacez l'icône de chargeur de chargement pour charger plus de pièces |
spinner-icon-messages | Remplacez l'icône de chargeur de chargement dans une pièce |
spinner-icon-infinite-messages | Remplacez l'icône de chargement du spinner pour charger plus de messages |
spinner-icon-room-file | Remplacez l'icône de chargement du spinner pour charger des fichiers lourds |
spinner-icon-message-file_{{MESSAGE_ID}} | Remplacez l'icône de chargement du spinner dans un message contenant une image |
scroll-icon | Remplacez l'icône de défilement de défilement |
reply-close-icon | Remplacez l'icône de fermeture de réponse |
image-close-icon | Remplacez l'icône de fermeture de l'image |
file-icon | Remplacez l'icône de fichier |
files-close-icon | Remplacez l'icône de fermeture du fichier |
edit-close-icon | Remplacez l'icône Edit Close |
preview-close-icon | Remplacez l'icône de fermeture de l'aperçu des médias |
emoji-picker-icon | Remplacez l'icône du cueilleur à emoji |
emoji-picker-reaction-icon_{{MESSAGE_ID}} | Remplacez l'icône de réaction de sélecteur emoji (dans la boîte de message) |
paperclip-icon | Remplacez l'icône de trombone |
send-icon | Remplacez l'icône d'envoi de message |
eye-icon_{{MESSAGE_ID}} | Remplacer l'icône des yeux (message d'image) |
document-icon_{{MESSAGE_ID}} | Remplacez l'icône de document |
pencil-icon_{{MESSAGE_ID}} | Remplacez l'icône du crayon |
checkmark-icon_{{MESSAGE_ID}} | Remplacez l'icône de coche d'un message |
checkmark-icon_{{ROOM_ID}} | Remplacez l'icône de coche d'un message de la liste des chambres |
deleted-icon_{{MESSAGE_ID}} | Remplacez l'icône supprimée d'un message |
deleted-icon_{{ROOM_ID}} | Remplacez l'icône supprimée d'un message de la liste des chambres |
microphone-icon_{{ROOM_ID}} | Remplacer l'icône de microphone |
dropdown-icon_{{MESSAGE_ID}} | Remplacez l'icône déroulante |
search-icon | Remplacez l'icône de recherche |
add-icon | Remplacez l'icône Ajouter une pièce |
audio-stop-icon | Remplacez l'icône d'arrêt de l'enregistreur audio |
audio-check-icon | Remplacez l'icône Confirmer Recorder Confirmer |
audio-pause-icon_{{MESSAGE_ID}} | Remplacez l'icône de pause audio du message |
audio-play-icon_{{MESSAGE_ID}} | Remplacez l'icône de lecture audio du message |
Vous pouvez trouver le code source pour implémenter une application de chat complète en vedette à l'aide de Firebase / Firestore dans le dossier demo .
Pour le tester en utilisant votre propre projet Firebase:
git clone https://github.com/advanced-chat/vue-advanced-chat.gitdemo/src/database/index.js fichier, remplacez la ligne const config = ... par votre propre configuration de basedemo et exécutez npm run serve Si vous décidez d'utiliser le même code que dans le dossier demo pour créer votre application de chat, vous devez avoir une structure de données Firestore spécifique.
Pour vous aider à démarrer, j'ai ajouté dans demo/src/App.vue une méthode addData pour initialiser certaines données sur votre base de données Firestore.
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
}
} Votre aide est toujours appréciée
Ce projet est sous licence MIT
