Vue Advanced Chat
made with Vuejs

Vue Advanced Chat

这是一个Vue聊天房间组件。

简介及使用教程

Vue Advanced Chat(高级聊天)是一个功能丰富和完全可定制的聊天室组件。共享短信、文件、图片和表情符号,回复用户的信息,跟踪所看到的和新的信息,并创建您自己的自定义操作。该组件可以集成到您的VUE应用程序中,也可以将其用作您喜爱的库和框架中的Web组件。

使用自己的后端创建和管理多个用户的聊天室。可自定义符合自己品牌的主题。默认可选两个漂亮的光明和黑暗的主题。

功能:

  • 实时聊天消息
  • 可定制
  • 后端可适配
  • 图片、文件和表情
  • 编辑消息
  • 回复其他消息
  • UI元素,用于查看、新、删除和键入消息
  • 在线/脱机状态
  • 灵活选项
  • 自定义主题——光主题和暗主题
  • PWA支持
  • Web组件支持

安装

Npm

npm install --save vue-advanced-chat

Yarn

yarn add --save vue-advanced-chat

使用

<template>
  <chat-window :currentUserId="currentUserId" :rooms="rooms" :messages="messages" />
</template>

<script>
  import ChatWindow from 'vue-advanced-chat'
  import 'vue-advanced-chat/dist/vue-advanced-chat.css'

  export default {
    components: {
      ChatWindow
    },
    data() {
      return {
        rooms: [],
        messages: [],
        currentUserId: 1234
      }
    }
  }
</script>
作者

Antoine Dupont

相关项目