简体中文 | English

如果觉得还行,请给一个👉 star,谢谢😎 ! 有疑问请加群。

简介

这是一款基于 vue.js 开发的聊天室组件库，在提供基础封装的同时，最大程度的增加扩展性。

下面是效果演示图：

MChat组件效果图：

IChat组件效果图：

🌰 加群获得群聊版本代码

群聊演示地址 静态效果演示

• Github
• Gitee

项目来由

vue-mchat 是本人前端阶段性学习总结的项目，因为并非前端开发工程师所以还是有不少瑕疵。

如果有问题或者需求可以加群问，或者提 `Issues`!

如何安装

• 使用 npm 安装

  npm install vue-mchat

使用

在main.js中引入

# npm 下载方式
// 进入css
import 'MChat/lib/MChat.css'
//引入组件
import MChat from 'MChat'
// 使用vue加载组件
Vue.use(MChat)
# 

如何进行二次开发

方案一：

直接将 pacages 文件夹复制到你需要的项目，在 main.js 中引入 vue-mchat:

import App from './App.vue'
import MChat from '../packages/index'

Vue.use(MChat)

方案二：

在 vue-mchat 的基础上进行开发，通过打包成js库引入：

在 vue-mchat 目录下执行：

npm run lib 

可获得 lib 文件其中包含 MChat 的编译文件库，将 lib 整个复制到项目里，在 main.js 中引入:

import  '../lib/MChat.css'
import MChat from '../lib/MChat.umd'

Vue.use(MChat)

组件API

可以根据 src/test/ 下的 Test.vue 进行静态调试

MChat 与 IChat 的区别

MChat 只具备有基础的 WebIM 功能，它没有用户管理及群组模块，则意味着你需要自己掌控数据变化。适用场景：客服系统

IChat 是模仿 Mac 上的 QQ 进行设计的，它封装了用户群组管理的数据模块，你只需要对接API就能使用。适用场景：独立的 WebIM

MChat

Attributes

config MChat配置信息

mine 我的信息

chats 会话属性

Content talk content format

Methods

窗口级事件

MChat Events

IChat

Attributes

mine 我的信息

初始化

    let data = {
      // 好友列表
      friends: this.friendList,
      // 群组列表
      groups: this.groupList,
      // 系统消息列表
      messages: this.systemMessage,
    };
     this.$nextTick(() => {
      this.$refs.IChat.setData(data);
    });

groups 群组列表数据格式

friends 好友列表数据格式

messages 系统消息列表数据格式

[
    {
        id: 1,
        from:
        {
            id: 0,
            name: '草野优衣',
            avatar: require("../public/avatar/ue.png"),
        },
        to:
        {
            id: 1,
            name: '七月',
            avatar: require("../public/avatar/avatar_meteor.png"),
        },
        type: 'acceptFriend',
        message: '111',
        timestamp: undefined
    },
]

Methods

IChat 将全部事件集中到了 bindEvent(event, data) 上:

  <IChat ref="IChat" :config="config" :mine="mine" @bindEvent="handleEvent">
    </IChat>

bindEvent 包含以下事件

Event

初始化 IChat 数据:

  this.$refs.IChat.setData();

更新群组列表 groups:

  this.$refs.IChat.setGroups();

更新好友列表 friends:

  this.$refs.IChat.setFriends();

更新系统消息列表 messages:

  this.$refs.IChat.setSystemMessage();

新的系统消息:

  this.$refs.IChat.newSystemMessage();

新消息:

  this.$refs.IChat.getMessage();

** 如有问题请先看上述使用文档和文章，若不能满足，欢迎 issue 或者 发邮件给我，根据star和watch的人数进行下一步更新

MChat-right-box

** 通过 Scoped slot 可以获取到 chat (内部的状态管理）的数据，用法参考 demo。

MChat-group-list

Attributes

Methods

QQ交流群

Browsers support

Modern browsers and Internet Explorer 10+.

| IE / Edge | Firefox | Chrome | Safari | | --------- | --------- | --------- | --------- | | IE10, IE11, Edge| last 2 versions| last 2 versions| last 2 versions

License

MIT

Copyright (c) 2020-present july-meteor