简体中文 | English
- 基础聊天室功能
- 文字媒体转换
- 未读提醒
- 多会话
- 右边框
- 基础群组模板
还在做
- 自定义组件扩展
- 基础群组模板
- 工具栏
- 自定义组件扩展
*使用 npm
安装
npm install vue-mchat
-
使用
yarn
安装
在main.js
中引入
// 进入css
import 'MChat/lib/MChat.css'
//引入组件
import MChat from 'MChat'
// 使用vue加载组件
Vue.use(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