基于vue2.x 聊天(IM)UI组件,开箱即用

6,673 阅读2分钟

m-chat

npm npm npm NPM npm collaborators

介绍

基于vue2.x 聊天(IM)UI组件(3.x以后支持)

演示

Demo

安装

npm install @maybecode/m-chat

全局安装

import Vue from 'vue'
import MChat from '@maybecode/m-chat'

Vue.use(MChat)

局部安装

import MChat from '@maybecode/m-chat'

export default {
  components: {
    MChat
  }
}

功能

  • 文字展示(支持html标签渲染)
  • 图片展示和预览
  • 视频播放
  • 语音播放
  • 自定义默认头像
  • 下拉加载更多
  • 图片/视频/语音发送功能和UI

预览

main

Demo

 <m-chat
      ref="mChat"
      :messages="messages"
      @submit="submit"
      :loadMore="loadMore"
      height="100vh"
    >
    </m-chat>

Props

参数类型默认值说明
messagesArray[]消息数组
heightString100vh容器高度
loadMoreFunction-加载更多函数
defaultAvatarString-默认头像(支持本地头像require导入或者地址)
commentBooleantrue是否显示回复框
popoverListArray[]气泡框 例: [{type:'chehui',text:'撤回'}]
customRecordBooleanflase自定义录音功能(设置为true后自带录音失效,并且不触发submit事件)
openExtendsArray["image", "file", "video"]扩展面板显示的功能
imgMaxSizeNumber500图片大小上传限制(kb)
videoMaxSizeNumber500视频大小上传限制(kb)
fileMaxSizeNumber500文件大小上传限制(kb)
leadPageString-微信公众号网页下载引导页面,例: www.xxx.com/leadPage 会跳转到 www.xxx.com/leadPage?ur…', 注意:参数需要用decodeComponent()解密

消息对象

 {
    id: null, // 唯一id
    name: "", // 姓名
    avatar: "", // 头像地址
    self: false, // 是否是自己
    content:{
            text: "", // 文本
            duration: "", // 时长
            imageUrl: "", // 图片地址
            videoUrl: "", // 视频地址
            audioUrl: "", // 音频地址
            fileUrl: "", // 文件地址
            fileName: "", // 文件名称
            fileSize: "", // 文件大小
            filExt: "", // 文件扩展名
    },
    type: "text", // 文件类型:text|image|audio|video,
    isBack:false // 控制该消息是否已经撤回,
    time:'' // 发送时间
 }

事件

事件名说明回调参数
submit文字、图片、视频、语音等等发送事件(content:{type:string,content:object})
popItemClick气泡框点击事件(obj:{type:string,data:object})
recordStart录音开始-
recordStop录音停止({ blob, duration})--H5录音才有回调参数,自定义录音没有
recordCancel录音取消-

popItemClick Demo

     popItemClick(obj) {
      // 撤回
      if (obj.type == "chehui") {
        obj.data.isBack = true;
      }
      console.log(obj);
    }

Slots

名称说明参数
left输入框左边-
right输入框右边-

方法

通过 ref 可以获取到 mChat 实例并调用实例方法

方法名说明参数返回值
toggleExtend控制扩展面板,通过参数可以控制是否展示扩展面板(flag:boolean)-

LICENSE

版权所有Copyright © by 或许

码云