插件名称 | vue-advanced-chat |
---|---|
版本号 | v1.1.0 |
发布时间 | 2020年4月11日 |
插件作者 | antoine92190 |
vue-advanced-chat是一个实时聊天库,可在Vue.js应用程序上创建灵活的,可自定义的实时对话聊天。
支持图像,文件,表情符号,消息编辑,浅色/深色主题,
# Yarn
$ yarn add vue-advanced-chat
# NPM
$ npm install vue-advanced-chat --save
1.安装必要的资源并将其导入您的项目。
import ChatWindow from 'vue-advanced-chat'
import 'vue-advanced-chat/dist/vue-advanced-chat.css'
2.在模板中创建一个新的聊天窗口组件。
<template>
<chat-window
:currentUserId="currentUserId"
:rooms="rooms"
:messages="messages" />
</template>
3.完整的道具,可定制对话聊天窗口。
height: { type: String, default: '600px' },
theme: { type: String, default: 'light' },
colors: { type: Object, default: null },
textMessages: { type: Object, default: null },
currentUserId: { type: String, default: '' },
rooms: { type: Array, default: () => [] },
loadingRooms: { type: Boolean, default: false },
messages: { type: Array, default: () => [] },
messagesLoaded: { type: Boolean, default: false },
menuActions: { type: Array, default: () => [] },
messageActions: {
type: Array,
default: () => [
{ name: 'replyMessage', title: 'Reply' },
{ name: 'editMessage', title: 'Edit Message', onlyMe: true },
{ name: 'deleteMessage', title: 'Delete Message', onlyMe: true }
]
},
showAddRoom: { type: Boolean, default: true },
showFiles: { type: Boolean, default: true },
showEmojis: { type: Boolean, default: true },
showReactionEmojis: { type: Boolean, default: true },
newMessage: { type: Object, default: null }
4.完整的props来定制聊天消息。
currentUserId: { type: String, required: true },
textMessages: { type: Object, required: true },
index: { type: Number, required: true },
message: { type: Object, required: true },
messages: { type: Array, required: true },
editedMessage: { type: Object, required: true },
roomUsers: { type: Array, default: () => [] },
messageActions: { type: Array, required: true },
roomFooterRef: { type: HTMLDivElement },
newMessages: { type: Array },
showReactionEmojis: { type: Boolean, required: true },
emojisList: { type: Object, required: true },
hideOptions: { type: Boolean, required: true }
5.定制聊天室的全套props
rooms="[
{
roomId: 1,
roomName: 'Room 1',
lastMessage: {
content: '收到的最新消息',
sender_id: 1234,
username: 'John Doe',
timestamp: '10:20',
seen: false,
new: true
},
users: [
{
_id: 1234,
username: 'John Doe'
},
{
_id: 4321,
username: 'John Snow'
}
]
}
]"
6.事件处理程序。
fetchMessages({ room, options }) {
// 用户在顶部滚动以加载更多消息
}
sendMessage ({ roomId, content, file, replyMessage }) {
// 用户发送了一条消息
}
editMessage ({ roomId, messageId, newContent, file, replyMessage }) {
// 用户编辑了一条消息
}
deleteMessage ({ roomId, messageId }) {
// 用户删除了一条消息
}
openFile ({ message }) {
// 用户单击了查看或下载文件
}
addRoom () {
// 用户单击搜索栏旁边的加号
}
menuActionHandler ({ roomId, action }) {
// 用户单击房间内的垂直点图标
}
messageActionHandler ({ roomId, action }) {
// 用户单击消息内的下拉图标
}
sendMessageReaction ({ roomId, messageId, reaction, remove }) {
// 用户单击消息内的表情图标
}
v1.1.0 (08/12/2021)
v1.0.0 (08/11/2021)
v0.9.0 (07/31/2021)
v0.8.9 (07/27/2021)
v0.8.8 (07/25/2021)
v0.8.7 (07/17/2021)
v0.8.6 (06/28/2021)
v0.8.5(05/02/2021)
v0.8.4(04/05/2021)
v0.8.3(03/17/2021)
v0.8.2(03/14/2021)
v0.8.1(03/07/2021)
avatar
在 messages
道具v0.8.0(03/03/2021)
room-info
和 textarea-action-handler
事件v0.7.9(03/02/2021)
v0.7.8(02/25/2021)
v0.7.7(02/22/2021)
v0.7.6(02/22/2021)
v0.7.5(02/20/2021)
v0.7.4(02/19/2021)
v0.7.3(02/19/2021)
v0.7.2(02/13/2021)
v0.7.1(02/12/2021)
v0.7.0(01/30/2021)
v0.6.9(01/24/2021)
v0.6.8(01/24/2021)
v0.6.7(01/20/2021)
v0.6.6(01/16/2021)
v0.6.5(01/10/2021)
v0.6.4(01/10/2021)
toggle-rooms-list
单击切换图标以打开/隐藏房间列表时添加 事件v0.6.3(01/03/2021)
v0.6.2(01/01/2021)
v0.6.1(2020年12月26日)
v0.6.0(12/26/2020)
v0.5.7(2020年12月20日)
v0.5.7(2020年12月19日)
acceptedFiles
道具以限制可以上传的文件类型*roomMessage
在启动时修复 道具v0.5.6(12/01/2020)
loadFirstRoom
道具以删除初始化时打开第一个房间的默认行为no-room-selected
右侧面板为空时添加 插槽以添加UIv0.5.5(11/29/2020)
v0.5.4(11/21/2020)
saved
和 distributed
属性以 messages
显示双选中标记图标v0.5.3(11/11/2020)
v0.5.2(11/07/2020)
v0.5.1(10/29/2020)
v0.5.0(10/07/2020)
v0.4.9(10/06/2020)
v0.4.8(2020年10月3日)
v0.4.7(09/26/2020)
v0.4.6(09/14/2020)
v0.4.5(09/03/2020)
v0.4.4(08/17/2020)
v0.4.3(07/05/2020)