1.4.4 • Published 2 years ago

@maybecode/m-chat v1.4.4

Weekly downloads
-
License
MIT
Repository
-
Last release
2 years ago

m-chat

npm

npm

功能

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

示例

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

安装

npm install @maybecode/m-chat@v3

Props

参数类型默认值说明
messagesArray[]消息数组
heightString100vh容器高度
refreshFunction-刷新(加载更多)回调
configObject-高级配置(详情见下方config定义)

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:'' // 发送时间
 }

事件

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

Slots

名称说明参数
custon(对应msg中的type属性)自定义消息类型{ item }
panel自定义扩展面板-

方法

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

方法名说明参数返回值
switchPanel扩展面板显示/隐藏(flag:boolean)-

使用须知

录音

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

3.0.16

2 years ago

3.0.17

2 years ago

3.0.15

2 years ago

3.0.14

2 years ago

3.0.12

2 years ago

3.0.13

2 years ago

3.0.11

2 years ago

3.0.10

2 years ago

1.4.4

2 years ago

3.0.8

2 years ago

3.0.7

2 years ago

3.0.6

2 years ago

3.0.9

2 years ago

1.4.3

2 years ago

1.4.2

2 years ago

1.4.1

2 years ago

3.0.5

2 years ago

3.0.4

2 years ago

3.0.3

2 years ago

3.0.2

2 years ago

3.0.1

2 years ago

3.0.0

2 years ago

3.0.0-beta.1

2 years ago

1.3.7

3 years ago

1.4.0

3 years ago

1.3.9

3 years ago

1.3.8

3 years ago

1.3.6

3 years ago

1.3.5

3 years ago

1.3.4

3 years ago

1.3.3

3 years ago

1.3.2

3 years ago

1.3.1

3 years ago

1.3.0

3 years ago

1.2.22

4 years ago

1.2.21

4 years ago

1.2.20

4 years ago

1.2.18

4 years ago

1.2.19

4 years ago

1.2.12

4 years ago

1.2.13

4 years ago

1.2.16

4 years ago

1.2.17

4 years ago

1.2.14

4 years ago

1.2.15

4 years ago

1.2.8

4 years ago

1.2.7

4 years ago

1.2.9

4 years ago

1.2.10

4 years ago

1.2.11

4 years ago

1.2.6

4 years ago

1.2.5

4 years ago

1.2.4

4 years ago

1.2.0

4 years ago

1.2.3

4 years ago

1.2.2

4 years ago

1.2.1

4 years ago

1.1.2

4 years ago

1.1.1

4 years ago

1.1.0

4 years ago

1.0.4

4 years ago

1.0.3

4 years ago

1.0.2

4 years ago

1.0.1

4 years ago

1.0.0

4 years ago