m-chat

introduce

Ve2. X based CHAT (IM)UI Component (3.x support later)

demo

Demo

The installation

npm install @maybecode/m-chat
Copy the code

Global installation

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

Vue.use(MChat)
Copy the code

Local installation

import MChat from '@maybecode/m-chat'

export default {
  components: {
    MChat
  }
}
Copy the code

function

  • Text display (support HTML tag rendering)
  • Picture show and preview
  • Video playback
  • Voice broadcast
  • Customize the default profile picture
  • Drop down to load more
  • Photo/video/voice sending and UI

preview

Demo

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

Props

parameter type The default value instructions
messages Array [] Message array
height String 100vh Height of the container
loadMore Function – Loading more functions
defaultAvatar String – Default profile picture (support local profile picture require import or address)
comment Boolean true Whether to display a reply box
popoverList Array [] Bubble box example: [{type:’chehui’,text:’ retractable ‘}]
customRecord Boolean flase Custom recording function (set to true and invalid recording, and do not trigger submit event)
openExtends Array [“image”, “file”, “video”] Extend the functionality displayed on the panel
imgMaxSize Number 500 Image Size upload Limit (KB)
videoMaxSize Number 500 Video Upload Size Limit (KB)
fileMaxSize Number 500 File Size Upload Limit (KB)
leadPage String – Download guide page of wechat public account webpage, for example:www.xxx.com/leadPageWill jump towww.xxx.com/leadPage?ur…’, note that parameters need to be decrypted with decoponent ()

Message object

{id: null, // unique ID name: "", // avatar: ", // avatar address self: false, // whether it is self content:{text: "", // text duration: "", // length imageUrl: "", // image address videoUrl: "", // audio address fileUrl: "", // file address fileName:" "/ / file name fileSize:", "", / / file size filExt:" ", / / file extensions}, type: "Text", / / file type: text | image | audio | video, isBack: false/control/whether the news is withdrawn, the time: "' / / send time}Copy the code

The event

The event name instructions The callback parameter
submit Text, picture, video, voice, and so on send events (content:{type:string,content:object})
popItemClick Bubble box click event (obj:{type:string,data:object})
recordStart The tape began –
recordStop To stop recording ({blob, duration})–H5 recordings have callback parameters, custom recordings do not
recordCancel The tape to cancel –

popItemClick Demo

PopItemClick (obj) {// Undo if (obj.type == "chehui") {obj.data.isback = true; } console.log(obj); }Copy the code

Slots

The name of the instructions parameter
left Input field left –
right To the right of the input –
<! — extend Extend the panel

methods

The ref gets the mChat instance and invokes the instance method

The method name instructions parameter The return value
toggleExtend You can control whether to display the extension panel by setting parameters (flag:boolean) –

LICENSE

Copyright © by

Yards cloud