代码拉取完成,页面将自动刷新
同步操作将从 Meteor/vue-mchat 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
简体中文 | English
vue-mchat 是本人前端阶段性学习总结的项目,因为并非前端开发工程师所以还是有不少瑕疵。
项目去重了很多业务相关的东西,只提供扩展思路和接方法接口,并非是我无法实现。
只是想抛砖引玉!(其实是突然上了推荐,不知所措。😲只能爬起来更新了)
以整理代码结构为主,会提供一些对接MChat的演示例子
*使用 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 | 会话头像 |
online | true | boolean | type类型为friend |
类型 | 格式 | 说明 | 参考值 |
---|---|---|---|
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 | 操作会话框触发,返回事件类型及窗口信息。具体事件看下表1 | event,data |
talkEvent | 当你点击对话内容返回对话信息触发 (已经弃用) | user,message |
sendMessage | 每当你发送一个消息,都可以通过该事件监听到。 回调参数接受一个object类型的值,携带发送的聊天信息 | message |
loadHistory | 点击查看更多信息后触发,会返回一个回调方法 | funcation() |
getMessage | 监听接受的消息 | user,message |
表1
事件名称 | 说明 | 参数 |
---|---|---|
chatTop | 会话置顶 | { id: 会话id, name: 会话名称 ,type: 会话类型 } |
chatTop | 会话置顶 | 窗口信息 |
clickTalk | 当你点击对话内容返回对话信息触发 | 对话内容 |
clickUser | 当你点击聊天框内用户头像 | {id: 用户Id, mine: 是否是自己 , username:用户名称 } |
事件名称 | 说明 | 回调参数/使用方法 |
---|---|---|
getMessage | 监听接受的消息 | 参考下方示例1 |
getCurrent | 获取当前会话 | Objectg |
示例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
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。