基於vue2.x 聊天(IM)UI組件,開箱即用

m-chat

介紹

基於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

預覽

Demo

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

Props

參數	類型	默認值	說明
messages	Array	[]	消息數組
height	String	100vh	容器高度
loadMore	Function	-	加載更多函數
defaultAvatar	String	-	默認頭像(支持本地頭像require導入或者地址)
comment	Boolean	true	是否顯示回復框
openPops	Array	['copy','cancel']	氣泡框內顯示的功能 例: ['copy','cancel']
customRecord	Boolean	flase	自定義錄音功能(設置為true后自帶錄音失效，並且不觸發submit事件)
openExtends	Array	["image", "file", "video"]	擴展面板顯示的功能
openBases	Array	["text", "audio", "emoji"]	控制基礎功能顯示
imgMaxSize	Number	500	圖片大小上傳限制(kb)
videoMaxSize	Number	500	視頻大小上傳限制(kb)
fileMaxSize	Number	500	文件大小上傳限制(kb)
leadPage	String	-	微信公眾號網頁下載引導頁面,例: http://www.xxx.com/leadPage 會跳轉到 http://www.xxx.com/leadPage?url='xxx'&name='xxxxx', 注意:參數需要用decodeComponent()解密

消息對象

 {
    id: null, // 唯一id
    name: "", // 姓名
    avatar: "", // 頭像地址
    self: false, // 是否是自己
    content:{
            text: "", // 文本
            duration: "", // 時長
            imageUrl: "", // 圖片地址
            videoUrl: "", // 視頻地址
            audioUrl: "", // 音頻地址
            fileUrl: "", // 文件地址
            fileName: "", // 文件名稱
            fileSize: "", // 文件大小
            fileExt: "", // 文件擴展名
    },
    type: "text", // 文件類型:text|image|audio|video,
    isCancel: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 == "cancel") {
        obj.data.isCancel = true;
      }
      console.log(obj);
    }

Slots

名稱	說明	參數
left	輸入框左邊	-
right	輸入框右邊	-

方法

通過 ref 可以獲取到 mChat 實例並調用實例方法

方法名	說明	參數	返回值
toggleExtend	控制擴展面板,通過參數可以控制是否展示擴展面板	(flag:boolean)	-

LICENSE

版權所有Copyright © by 或許

碼雲