1.2.0 • Published 3 years ago
vue-meteor-chat v1.2.0
简体中文 | English
如果觉得还行,请给一个👉 star,谢谢😎 ! 有疑问请加群。
简介
这是一款基于 vue.js 开发的聊天室组件库,在提供基础封装的同时,最大程度的增加扩展性。
下面是效果演示图:
MChat组件效果图:
IChat组件效果图:
🌰 加群获得群聊版本代码
项目来由
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
Copyright (c) 2020-present july-meteor