34 Star 233 Fork 47

Meteor / vue-mchat

Create your Gitee Account
Explore and code with more than 6 million developers,Free private repositories !:)
Sign up
Clone or download
Cancel
Notice: Creating folder will generate an empty file .keep, because not support in Git
Loading...
README.en.md

MChat

vue element-ui Build Status license

简体中文 | English

如果觉得还行,请给一个👉 star,谢谢😎 !

简介

这是一款基于vue与elementu-ui开发的聊天室组件库,在UI上模仿了TIM及微信。在提供基础封装的同时,最大程度的增加扩展性。

演示图 MChat-index演示图

🌰 加群获得群聊版本代码

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

🌰 项目来由

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

v1.0.0内容

  • 基础聊天室功能
    • 文字媒体转换
    • 未读提醒
    • 多会话
  • 右边框
    • 基础群组模板
    • 自定义组件扩展
  • 工具栏
    • 自定义组件扩展

下一版本计划

以整理代码结构为主,会提供一些对接MChat的演示例子

  • 提供更好的演示服务
    • 用户注册/登录
    • 群聊
  • 提供弹出层封装
  • 工具类
    • 文件上传
    • 代码

安装

*使用 npm 安装

# npm install vue-mchat
# 由于最近都在修改代码所以npm 库来不及更新 请使用以下方式进行使用
# 在项目根目录
npm install
# 执行打包 获取lib文件
npm run lib

# 或直接复制packages 文件夹 到你的项目里
  • 使用 yarn 安装

使用

main.js中引入

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

# 执行 npm run lib 方式
import '../lib/MChat.css'
import MChat from '../lib/MChat.umd'
Vue.use(MChat)

# 复制packages 文件 方式
import MChat from '../packages/index'
Vue.use(MChat)

# 

#组件说明

Sample

MChat

Attributes

config MChat配置信息
参数 类型 默认值 说明
rightBox false boolean 是否有右侧抽屉,如果为true,则右侧面板显示,可以加入自定义组件
brief true boolean 是否开启简约模式,Chat可以被缩小
notice false boolean 是否开启桌面消息提醒,即在浏览器之外的提醒
voice false boolean 是否开启消息提醒
mine 我的信息
参数 默认值 类型 说明
id 10001 string/number 我的id
username july-meteor string 我的昵称
sign 与其感慨路难行,不如马上出发! string 签名
avatar '/avatar/avatar_meteor.png' url 头像
data 你需要的数据 object 扩展数据
chats 会话属性
参数 类型 默认值 说明
id 10002 string/number 会话id
name 海喵突基队 string 会话名称
type group string 会话类型 group/friend 根据你的需要自行扩展
avatar /images/group_1.jpg url 会话头像
online true boolean type类型为friend
Content talk content format
类型 格式 说明 参考值
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]

Methods

方法名 说明 参数
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:用户名称 }

MChat Events

事件名称 说明 回调参数/使用方法
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的人数进行下一步更新

MChat-right-box

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

MChat-group-list

Attributes

参数 类型 默认值 说明
notices array id, type, title 群公告栏
userList array id, name,type, avatar 成员信息
filter-user-method Function(value, data) 对成员节点进行筛选时执行的方法,返回 true 表示这个节点可以显示,返回 false 则表示这个节点会被隐藏

Methods

方法名 说明 参数
click 点击群公告,或者成员触发 event

Event

QQ交流群

共同进步

Browsers support

Modern browsers and Internet Explorer 10+.

IEIE / Edge FirefoxFirefox ChromeChrome Safari
IE10, IE11, Edge last 2 versions last 2 versions last 2 versions

License

MIT

Copyright (c) 2020-present july-meteor

Comments ( 4 )

Sign in for post a comment

About

这是一款基于vue与elementu-ui开发的聊天室组件库,在UI上模仿了TIM及微信。在提供基础封装的同时,最大程度的增加扩展性。 spread retract
JavaScript and 4 more languages
MIT
Cancel

Releases

No release

Gitee Metrics

Contributors

All

Activities

load more
can not load any more
JavaScript
1
https://gitee.com/july-meteor/vue-mchat.git
git@gitee.com:july-meteor/vue-mchat.git
july-meteor
vue-mchat
vue-mchat
master

Search

103611 48b8ff67 1899542 103622 4d02230c 1899542