@maybecode/m-chat v1.4.4

m-chat

功能

• 文字展示（支持html标签渲染）
• 图片展示和预览
• 视频播放
• 语音播放
• 自定义默认头像
• 下拉加载更多
• 图片/视频/语音发送功能
• 提供自定义类型插槽（custom）进行业务的定制
• 支持Typescript

示例

示例源码：参考examples目录下面的App.vue文件 在线示例：Demo

安装

npm install @maybecode/m-chat@v3

Props

config

默认配置 具体的参数规则在编辑器中都会有提示

{
        /**
         * 主题
         */
        theme: 'light',
         /**
        * 图片上传配置(vant) 文件、视频...以此类推
        * @doc vant-uploader  https://vant-contrib.gitee.io/vant/#/zh-CN/uploader#props
        * @warn 如果和imageUploader中的配置存在冲突那么以imageUploader为准
        */
        vanImageUploader: {},
        /**
         * 图片上传
         */
        imageUploader: {
            /**
             * 文件大小限制，单位为 kb
             */
            maxSize: 500,
            /**
             * 允许的文件类型
             */
            accept: ["image/*"]
        },
        /**
         * 文件上传
         */
        fileUploader: {
            maxSize: 500,
            accept: ['*'],
        },
        /**
         * 视频上传
         */
        videoUploader: {
            maxSize: 500,
            accept: ['video/*']
        },
        /**
         * 开放的功能
         */
        open: ["text", "emoji", "image","audio", "file", "video"],
         /**
        * 扩展主面板功能
        * @demo  [{
            type: "location",
            text: "定位",
            icon: "location-o" // 支持http(s)地址或者vant自带的icon
         }]
         * @description 配置此选项将额外的功能item添加到列表中
         */
        extPanelItems: []
}

msg(消息)对象

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

事件

Slots

方法

通过 ref 可以获取到 m-chat 实例并调用实例方法

使用须知

录音

从3.0版本开始组件主体不再内置H5录音相关具体实现,如果有需求利用recordStart,recordCancel,recordStop相关回调和 Recorder 录音库进行开发。 对于微信公众号环境可以调用JSSDK中内置的录音方法配合回调来进行开发。