代码拉取完成，页面将自动刷新
同步操作将从 Meteor/vue-mchat 强制同步，此操作会覆盖自 Fork 仓库以来所做的任何修改，且无法恢复！！！
确定后同步将在后台操作，完成时将刷新页面，请耐心等待。
MChat
简体中文 | English
如果觉得还行请给个star谢谢
还在做
*使用 npm 安装
npm install vue-mchat
使用 yarn 安装
在main.js中引入
// 进入css
import 'MChat/lib/MChat.css'
//引入组件
import MChat from 'MChat'
// 使用vue加载组件
Vue.use(MChat)
#组件说明
MChat配置信息
| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| rightBox | false | boolean | 是否有右侧抽屉,如果为true,则右侧面板显示，可以加入自定义组件 |
| brief | true | boolean | 是否开启简约模式,Chat可以被缩小 |
| notice | false | boolean | 是否开启桌面消息提醒，即在浏览器之外的提醒 |
| voice | false | boolean | 是否开启消息提醒 |
我的信息
| 参数 | 默认值 | 类型 | 说明 |
|---|---|---|---|
| id | 10001 | string/number | 我的id |
| username | july-meteor | string | 我的昵称 |
| sign | 与其感慨路难行,不如马上出发！ | string | 签名 |
| avatar | '/avatar/avatar_meteor.png' | url | 头像 |
| data | 你需要的数据 | object | 扩展数据 |
会话属性
| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| id | 10002 | string/number | 会话id |
| name | 海喵突基队 | string | 会话名称 |
| type | group | string | 会话类型 group/friend 根据你的需要自行扩展 |
| avatar | /images/group_1.jpg | url | 会话头像 |
| 类型 | 格式 | 说明 | 参考值 |
|---|---|---|---|
| Text | ---- | 普通文字信息 | hello july meteor |
| emoji | emoji[url] | 表情 | emoji[汗] |
| Audio | audio[url] | 视频消息 | audio[https://www.w3school.com.cn/i/horse.mp3] |
| Video | video[url] | 音频 | video[https://www.w3school.com.cn/i/movie.mp4] |
| Image | img[url] | 图片类型 | img[/emoticon/emoticon_1.jpg] |
| 方法名 | 说明 | 参数 |
|---|---|---|
| chatEvent | 操作会话框触发,返回事件类型及窗口信息 | event |
| talkEvent | 当你点击对话内容返回对话信息触发 | user,message |
| sendMessage | 每当你发送一个消息，都可以通过该事件监听到。 回调参数接受一个object类型的值，携带发送的聊天信息 | message |
| loadHistory | 点击查看更多信息后触发,会返回一个回调方法 | funcation() |
| getMessage | 监听接受的消息 | user,message |
| 事件名称 | 说明 | 回调参数/使用方法 |
|---|---|---|
| getMessage | 监听接受的消息 | 参考下方示例1 |
示例1
let message = {
//消息来源用户名
username: '七月'
//消息来源用户头像
avatar: avatar,
//消息的来源ID（如果是私聊，则是用户id，如果是群聊，则是群组id）
id: 1001,
//聊天窗口来源类型，从发送消息传递的to里面获取
type: 'group',
//消息内容 请看 Attributes 中的content说明
content:'你好',
//消息id，可不传。除非你要对消息进行一些操作（如撤回）
cid: 0,
//是否我发送的消息，如果为true，则会显示在右方
mine: true,
//消息的发送者id（比如群组中的某个消息发送者），可用于自动解决浏览器多窗口时的一些问题
fromid: 10002,
//服务端时间戳毫秒数。注意：如果你返回的是标准的 unix 时间戳，记得要 *1000
timestamp: new date(),
};
// 方法一、 通过内置MChat的event 随时随地引用
this.$im.emit("getMessage", message);
// 方法二、
this.$refs[MChatname].getMessage(message)
**如有问题请先看上述使用文档和文章，若不能满足，欢迎 issue 或者 发邮件给我，根据star和watch的人数进行下一步更新
** 通过 Scoped slot 可以获取到 chat (内部的状态管理）的数据，用法参考 demo。
| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| notices | array | id, type, title | 群公告栏 |
| userList | array | id, name,type, avatar | 成员信息 |
| filter-user-method | Function(value, data) | — | 对成员节点进行筛选时执行的方法，返回 true 表示这个节点可以显示，返回 false 则表示这个节点会被隐藏 |
| 方法名 | 说明 | 参数 |
|---|---|---|
| click | 点击群公告，或者成员触发 | event |
Modern browsers and Internet Explorer 10+.
 IE / Edge |
 Firefox |
 Chrome |
 Safari |
|---|---|---|---|
| IE10, IE11, Edge | last 2 versions | last 2 versions | last 2 versions |
Copyright (c) 2020-present july-meteor
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。