vue-advanced-chat是一个实时聊天库，可在Vue.js应用程序上创建灵活的，可自定义的实时对话聊天。

支持图像，文件，表情符号，消息编辑，浅色/深色主题，

特征

• 实时聊天消息
• 可订制
• 后端不可知
• 图片，文件和表情符号
• 编辑讯息
• 回覆其他讯息
• UI元素，用于查看，新建，删除和键入消息
• 在线/离线状态
• 灵活的选择
• 自定义主题-浅色和深色模式
• 消防站示例
• Web组件支持

安装和下载：

# 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)

• 添加多文件支持
• 文件：{} 现在是文件：[{}]
• replyMessage.file：{} 现在是 replyMessage.files：[{}]
• 发送消息事件现在返回文件而不是文件
• 编辑消息事件现在返回文件而不是文件

v1.0.0 (08/11/2021)

• 重构以提高 Vue 3 兼容性
• 添加带有更多表情符号和肤色的新表情符号选择器
• 修复 lamejs 依赖
• 表情符号反应名称在消息道具中被 unicode 替换。

v0.9.0 (07/31/2021)

• 添加道具并修复 lamjs 导入

v0.8.9 (07/27/2021)

• 为 vue 3 迁移准备代码
• 更新消息 _id 时恢复删除消息动画

v0.8.8 (07/25/2021)

• 添加图像复制粘贴（使用 Ctrl + V）*
• 添加滑动返回触摸事件以返回移动设备上的房间列表
• 更新消息_id时删除消息动画

v0.8.7 (07/17/2021)

• 显示大量消息时提高打字性能
• 重构 SCSS 文件以提高 Web 组件兼容性

v0.8.6 (06/28/2021)

• 添加rooms-list-search槽替换搜索栏
• 添加 show-search 属性以隐藏搜索栏标题
• 添加系统消息格式

v0.8.5（05/02/2021）

• 修复无限房间滚动无法正常工作的问题
• 修复消息文件图标的位置
• 修复图像选项背景色
• 添加缺少的视频消息内容
• 在回复消息中添加丢失的音频/视频文件

v0.8.4（04/05/2021）

• 修复Vuetify兼容性（升级sass-loader）
• 删除SCSS范围属性以更好地与Web组件兼容
• 修复消息为空时的无限加载

v0.8.3（03/17/2021）

• 修复将Angular项目中的聊天作为Web组件导入时的兼容性
• 修复新消息分隔符在某些情况下不显示

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）

• 修复添加消息时的滚动行为
• 添加链接选项道具以禁用URL链接或更改URL目标
• 修复某些组件中缺少的文本格式设置道具

v0.7.8（02/25/2021）

• 修复新的消息分隔符和滚动行为

v0.7.7（02/22/2021）

• 添加类型声明文件以改善打字稿支持

v0.7.6（02/22/2021）

• 提取CSS构建文件
• 添加对音频类型的支持：ogg，wav，mpeg
• 添加对音频类型快速时间的支持
• 修复降价错误

v0.7.5（02/20/2021）

• 删除css导入+添加unpkg条目

v0.7.4（02/19/2021）

• 将lamejs设置为可选依赖项

v0.7.3（02/19/2021）

• 改善录音机的用户界面
• 改善音频播放器的用户界面
• 添加带有lamejs的mp3音频编码器（可选依赖项）
• 用户向上滚动时添加新消息指示符
• 修复缺少的插槽参数
• 删除文件后聚焦文本区域

v0.7.2（02/13/2021）

• 修复房间名称溢出
• 使用单房间道具修复房间ID初始化
• 清理降价逻辑
• 用@ delete-message事件中的消息替换messageId参数

v0.7.1（02/12/2021）

• 重构组件以提高性能和可维护性
• 回复邮件时不要重置草稿邮件
• 提高电子兼容性
• 清理，错误和UI修复

v0.7.0（01/30/2021）

• 添加gif和WebP图像支持
• 添加图片网址预览
• 添加视频文件预览
• Bug修复

v0.6.9（01/24/2021）

• 在房间列表中添加下拉图标以处理自定义房间操作
• 检查房间动作道具

v0.6.8（01/24/2021）

• 在文本区域中输入@时，将出现一个会议室用户列表，可以单击该列表以标记特定用户
• 检查打开用户标签事件

v0.6.7（01/20/2021）

• 不要自动生成类型文件，导致重复的标识符错误

v0.6.6（01/16/2021）

• 还原eslint依赖关系以使用typescript修复软件包安装错误
• 修复iOS上复选标记图标的位置

v0.6.5（01/10/2021）

• 修复加载更多消息时的跳跃式滚动
• 更新依赖

v0.6.4（01/10/2021）

• toggle-rooms-list 单击切换图标以打开/隐藏房间列表时添加 事件
• 上传文件时，单独的文件类型和扩展名
• 修复iOS设备上未显示的反应表情符号

v0.6.3（01/03/2021）

• 发送消息后保持设备键盘处于打开状态
• 滚动添加分页房间：收听更多房间事件以加载更多房间。当所有房间都已加载时，使用已加载房间停止分页
• 添加房间和消息DOM ID：可用于使用其ID来操纵特定的房间或消息

v0.6.2（01/01/2021）

• 添加显示页脚道具以显示/隐藏房间页脚

v0.6.1（2020年12月26日）

• 在以前的npm版本中未应用的修复

v0.6.0（12/26/2020）

• 修复丢失的烤肉串事件
• 使用文件名中的多个点修复图像类型

v0.5.7（2020年12月20日）

• 用linkify替换格式链接，以避免travis构建失败

v0.5.7（2020年12月19日）

• 添加 acceptedFiles 道具以限制可以上传的文件类型*
• 改善打字稿兼容性*
• 修复滚动图标外观行为
• roomMessage 在启动时修复 道具
• 改善textarea图像的大小
• 在房间列表中为音频文件添加已删除的消息

v0.5.6（12/01/2020）

• 在演示中提高Firestore DB的使用率
• 显示房间列表中正在键入的用户
• 房间加载时隐藏搜索栏
• 添加 loadFirstRoom 道具以删除初始化时打开第一个房间的默认行为
• no-room-selected 右侧面板为空时添加 插槽以添加UI

v0.5.5（11/29/2020）

• 功能：语音留言
• 功能：系统消息
• 事件：textareaActionHandler在textarea页脚中添加自定义图标
• 广告位：room-header-info
• 道具：showSendIcon
• 添加dist文件以允许npm安装

v0.5.4（11/21/2020）

•  向 道具添加 saved 和 distributed属性以 messages显示双选中标记图标
• 添加命名slots以实现更好的自定义

v0.5.3（11/11/2020）

• 当lastMessage用户离开会议室时修复错误
• 在最后一条消息和房间标题标题上添加省略号

v0.5.2（11/07/2020）

• 修复滚动问题，该问题不会出现在组件底部
• 在房间之间导航时修复无限消息微调框

v0.5.1（10/29/2020）

• 修复loadingRooms和messagesLoaded未初始化然后重新分配时的加载问题

v0.5.0（10/07/2020）

• 可以通过将unreadCount属性添加到每个房间对象来显示未读邮件徽章计数器
• 可以使用主题道具更改backgroundCounterBadge和colorCounterBadge颜色

v0.4.9（10/06/2020）

• 修复了Firefox上的CSS问题，该问题会使搜索输入与加号图标重叠

v0.4.8（2020年10月3日）

• 修复了在URL中添加文本格式快捷方式字符时会拆分URL的问题

v0.4.7（09/26/2020）

• 将动作参数添加到openFile函数。可用选项为下载和预览

v0.4.6（09/14/2020）

• 添加roomMessage属性–显示/隐藏可见和不可见消息之间的蓝线分隔线

v0.4.5（09/03/2020）

• 修复Quasar框架上未定义的roomTextarea引用

v0.4.4（08/17/2020）

• 添加roomMessage属性-默认textarea值

v0.4.3（07/05/2020）

• 添加内联和多行代码格式
• 如果为null，则阻止roomId观察者触发fetchRoom
• 用户界面修复