实时对话聊天vue高级聊天组件 - vue-advanced-chat

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

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

变更日志：

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
用户界面修复

特征

实时聊天消息
可订制
后端不可知
图片，文件和表情符号
编辑讯息
回覆其他讯息
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 }) { 
  // 用户单击消息内的表情图标
}

官网：https://github.com/antoine92190/vue-advanced-chat

演示：https://www.vue365.cn/code_demo.php?id=174

GitHub下载：https://github.com/antoine92190/vue-advanced-chat/archive/master.zip

插件名称	vue-advanced-chat
版本号	v0.8.3
发布时间	2020年4月11日
插件作者	antoine92190