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

实时对话聊天vue高级聊天组件 - vue-advanced-chat
插件名称 vue-advanced-chat
版本号 v0.8.3
发布时间 2020年4月11日
插件作者 antoine92190

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 }) { 
  // 用户单击消息内的表情图标
}