基于vue3的拆箱即用的IM组件
\r\n\r\n[](https://www.npmjs.com/package/@maybecode/m-chat)\r\n\r\n[](https://www.npmjs.com/package/@maybecode/m-chat)\r\n\r\n\r\n\r\n## 功能\r\n\r\n* [x] 文字展示（支持html标签渲染）\r\n* [x] 图片展示和预览\r\n* [x] 视频播放\r\n* [x] 语音播放\r\n* [x] 自定义默认头像\r\n* [x] 下拉加载更多\r\n* [x] 图片/视频/语音发送功能\r\n* [x] 提供自定义类型插槽（custom）进行业务的定制\r\n* [x] 支持Typescript\r\n\r\n## 示例\r\n\r\n示例源码：参考`examples`目录下面的`App.vue`文件\r\n在线示例：[Demo](http://null_639_5368.gitee.io/m-chat)\r\n\r\n## 安装\r\n\r\n```\r\nnpm install @maybecode/m-chat@v3\r\n```\r\n\r\n## Props\r\n\r\n| 参数 | 类型 | 默认值 | 说明 |\r\n| -------- | -------- | ------ | ------------------------------ |\r\n| messages | Array | [] | 消息数组 |\r\n| height | String | 100vh | 容器高度 |\r\n| refresh | Function | - | 刷新(加载更多)回调 |\r\n| config | Object | - | 高级配置(详情见下方config定义) |\r\n\r\n\r\n## config \r\n\r\n默认配置 具体的参数规则在编辑器中都会有提示\r\n\r\n```js\r\n{\r\n /**\r\n * 主题\r\n */\r\n theme: 'light',\r\n /**\r\n * 图片上传配置(vant) 文件、视频...以此类推\r\n * @doc vant-uploader https://vant-contrib.gitee.io/vant/#/zh-CN/uploader#props\r\n * @warn 如果和imageUploader中的配置存在冲突那么以imageUploader为准\r\n */\r\n vanImageUploader: {},\r\n /**\r\n * 图片上传\r\n */\r\n imageUploader: {\r\n /**\r\n * 文件大小限制，单位为 kb\r\n */\r\n maxSize: 500,\r\n /**\r\n * 允许的文件类型\r\n */\r\n accept: [\"image/*\"]\r\n },\r\n /**\r\n * 文件上传\r\n */\r\n fileUploader: {\r\n maxSize: 500,\r\n accept: ['*'],\r\n },\r\n /**\r\n * 视频上传\r\n */\r\n videoUploader: {\r\n maxSize: 500,\r\n accept: ['video/*']\r\n },\r\n /**\r\n * 开放的功能\r\n */\r\n open: [\"text\", \"emoji\", \"image\",\"audio\", \"file\", \"video\"],\r\n /**\r\n * 扩展主面板功能\r\n * @demo [{\r\n type: \"location\",\r\n text: \"定位\",\r\n icon: \"location-o\" // 支持http(s)地址或者vant自带的icon\r\n }]\r\n * @description 配置此选项将额外的功能item添加到列表中\r\n */\r\n extPanelItems: []\r\n}\r\n```\r\n## msg(消息)对象\r\n\r\n```\r\n {\r\n id: null, // 唯一id\r\n name: \"\", // 姓名\r\n avatar: \"\", // 头像地址\r\n self: false, // 是否是自己\r\n type: \"text\", // 类型: text|image|audio|video|file\r\n content:{\r\n text: \"\", // 文本\r\n duration: \"\", // 时长\r\n imageUrl: \"\", // 图片地址\r\n videoUrl: \"\", // 视频地址\r\n audioUrl: \"\", // 音频地址\r\n fileUrl: \"\", // 文件地址\r\n fileName: \"\", // 文件名称\r\n fileSize: \"\", // 文件大小\r\n fileExt: \"\", // 文件扩展名\r\n },\r\n isCancel:false // 控制该消息是否已经撤回,\r\n time:'' // 发送时间\r\n }\r\n```\r\n\r\n## 事件\r\n\r\n| 事件名 | 说明 | 回调参数 |\r\n| ------------ | ---------------------------------------- | --------------------------------- |\r\n| submit | 文字、图片、视频、语音、文件等等发送事件 | ({ type:string, content:object }) |\r\n| popItemClick | 气泡框点击事件 | ({ type:string, data:object }) |\r\n| recordStart | 录音开始 | - |\r\n| recordStop | 录音停止 | ({ blob:Blob, duration:number}) |\r\n| recordCancel | 录音取消 |\r\n\r\n## Slots\r\n\r\n| 名称 | 说明 | 参数 |\r\n| ----------------------------- | -------------- | -------- |\r\n| [custon(对应msg中的type属性)] | 自定义消息类型 | { item } |\r\n| panel | 自定义扩展面板 | - |\r\n\r\n## 方法\r\n\r\n通过 ref 可以获取到 m-chat 实例并调用实例方法\r\n\r\n| 方法名 | 说明 | 参数 | 返回值 |\r\n| ----------- | ----------------- | -------------- | ------ |\r\n| switchPanel | 扩展面板显示/隐藏 | (flag:boolean) | - |\r\n\r\n## 使用须知\r\n\r\n### 录音\r\n从3.0版本开始组件主体不再内置H5录音相关具体实现,如果有需求利用`recordStart`,`recordCancel`,`recordStop`相关回调和 [Recorder](https://github.com/xiangyuecn/Recorder) 录音库进行开发。\r\n对于微信公众号环境可以调用`JSSDK`中内置的录音方法配合回调来进行开发。\r\n","readmeFilename":"README.md","_id":"@maybecode/m-chat@3.0.0-beta.1","_nodeVersion":"14.18.0","_npmVersion":"6.14.15","dist":{"integrity":"sha512-Sl2hChXb36S675mZI1MQ0WNDEC0GD9IxL7tGlqeDTT4tcx6THK0ID3KnINxZh8zNT291q+CkWbKz4X21Ps1euQ==","shasum":"79ad537dc7025e47b5ddda4d7dabd794b3ba7065","tarball":"https://registry.npmjs.org/@maybecode/m-chat/-/m-chat-3.0.0-beta.1.tgz","fileCount":20,"unpackedSize":3800503,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD+h6e7/xJcrbdRwXlTAKiZq6ccnzzIuolmt9BwdUbcxwIgOExzdISH4T3d7+A5xs+MvxzsMKnXBhYEUyjQlOFR4OU="}]},"_npmUser":{"name":"qq1013480204","email":"1013480204@qq.com"},"directories":{},"maintainers":[{"name":"qq1013480204","email":"1013480204@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/m-chat_3.0.0-beta.1_1684115657812_0.10247261817741982"},"_hasShrinkwrap":false},"3.0.0":{"name":"@maybecode/m-chat","version":"3.0.0","description":"Mobile IM Component","type":"module","style":"./dist/style.css","types":"./dist/index.d.ts","main":"./dist/m-chat.umd.cjs","module":"./dist/m-chat.js","exports":{".":{"import":"./dist/m-chat.js","require":"./dist/m-chat.umd.cjs"}},"scripts":{"dev":"vue-tsc --noEmit && vite build --config ./build/vite.config.ts --watch","build":"vue-tsc --noEmit && vite build --config ./build/vite.config.ts","test":"echo \"Error: no test specified\" && exit 1"},"devDependencies":{"@amap/amap-jsapi-loader":"^1.0.1","@jtsang/vite-plugin-style-import":"^2.0.0","@types/node":"^18.7.21","@vitejs/plugin-vue":"^3.1.0","@vueuse/core":"^10.1.2","any-touch":"^2.2.0","lodash":"^4.17.21","lottie-web":"^5.9.6","mitt":"^3.0.0","postcss-px-to-viewport-8-plugin":"^1.1.5","rollup-plugin-terser":"^7.0.2","sass":"^1.55.0","vant":"^3.6.3","vite":"^3.1.0","vite-plugin-dts":"^2.3.0","vite-plugin-libcss":"^1.0.5","vite-plugin-svgicon":"^1.3.1","vite-plugin-theme":"^0.8.6","vite-plugin-vue-setup-extend":"^0.4.0","vite-svg-loader":"^4.0.0","vue":"^3.2.37","vue-tsc":"^0.40.13"},"author":{"name":"maybe"},"license":"MIT","homepage":"https://gitee.com/null_639_5368/m-chat/v3","readme":"# m-chat\r\n基于vue3的拆箱即用的IM组件
\r\n\r\n[](https://www.npmjs.com/package/@maybecode/m-chat)\r\n\r\n[](https://www.npmjs.com/package/@maybecode/m-chat)\r\n\r\n\r\n\r\n## 功能\r\n\r\n* [x] 文字展示（支持html标签渲染）\r\n* [x] 图片展示和预览\r\n* [x] 视频播放\r\n* [x] 语音播放\r\n* [x] 自定义默认头像\r\n* [x] 下拉加载更多\r\n* [x] 图片/视频/语音发送功能\r\n* [x] 提供自定义类型插槽（custom）进行业务的定制\r\n* [x] 支持Typescript\r\n\r\n## 示例\r\n\r\n示例源码：参考`examples`目录下面的`App.vue`文件\r\n在线示例：[Demo](http://null_639_5368.gitee.io/m-chat)\r\n\r\n## 安装\r\n\r\n```\r\nnpm install @maybecode/m-chat@v3\r\n```\r\n\r\n## Props\r\n\r\n| 参数 | 类型 | 默认值 | 说明 |\r\n| -------- | -------- | ------ | ------------------------------ |\r\n| messages | Array | [] | 消息数组 |\r\n| height | String | 100vh | 容器高度 |\r\n| refresh | Function | - | 刷新(加载更多)回调 |\r\n| config | Object | - | 高级配置(详情见下方config定义) |\r\n\r\n\r\n## config \r\n\r\n默认配置 具体的参数规则在编辑器中都会有提示\r\n\r\n```js\r\n{\r\n /**\r\n * 主题\r\n */\r\n theme: 'light',\r\n /**\r\n * 图片上传配置(vant) 文件、视频...以此类推\r\n * @doc vant-uploader https://vant-contrib.gitee.io/vant/#/zh-CN/uploader#props\r\n * @warn 如果和imageUploader中的配置存在冲突那么以imageUploader为准\r\n */\r\n vanImageUploader: {},\r\n /**\r\n * 图片上传\r\n */\r\n imageUploader: {\r\n /**\r\n * 文件大小限制，单位为 kb\r\n */\r\n maxSize: 500,\r\n /**\r\n * 允许的文件类型\r\n */\r\n accept: [\"image/*\"]\r\n },\r\n /**\r\n * 文件上传\r\n */\r\n fileUploader: {\r\n maxSize: 500,\r\n accept: ['*'],\r\n },\r\n /**\r\n * 视频上传\r\n */\r\n videoUploader: {\r\n maxSize: 500,\r\n accept: ['video/*']\r\n },\r\n /**\r\n * 开放的功能\r\n */\r\n open: [\"text\", \"emoji\", \"image\",\"audio\", \"file\", \"video\"],\r\n /**\r\n * 扩展主面板功能\r\n * @demo [{\r\n type: \"location\",\r\n text: \"定位\",\r\n icon: \"location-o\" // 支持http(s)地址或者vant自带的icon\r\n }]\r\n * @description 配置此选项将额外的功能item添加到列表中\r\n */\r\n extPanelItems: []\r\n}\r\n```\r\n## msg(消息)对象\r\n\r\n```\r\n {\r\n id: null, // 唯一id\r\n name: \"\", // 姓名\r\n avatar: \"\", // 头像地址\r\n self: false, // 是否是自己\r\n type: \"text\", // 类型: text|image|audio|video|file\r\n content:{\r\n text: \"\", // 文本\r\n duration: \"\", // 时长\r\n imageUrl: \"\", // 图片地址\r\n videoUrl: \"\", // 视频地址\r\n audioUrl: \"\", // 音频地址\r\n fileUrl: \"\", // 文件地址\r\n fileName: \"\", // 文件名称\r\n fileSize: \"\", // 文件大小\r\n fileExt: \"\", // 文件扩展名\r\n },\r\n isCancel:false // 控制该消息是否已经撤回,\r\n time:'' // 发送时间\r\n }\r\n```\r\n\r\n## 事件\r\n\r\n| 事件名 | 说明 | 回调参数 |\r\n| ------------ | ---------------------------------------- | --------------------------------- |\r\n| submit | 文字、图片、视频、语音、文件等等发送事件 | ({ type:string, content:object }) |\r\n| popItemClick | 气泡框点击事件 | ({ type:string, data:object }) |\r\n| recordStart | 录音开始 | - |\r\n| recordStop | 录音停止 | ({ blob:Blob, duration:number}) |\r\n| recordCancel | 录音取消 |\r\n\r\n## Slots\r\n\r\n| 名称 | 说明 | 参数 |\r\n| ----------------------------- | -------------- | -------- |\r\n| [custon(对应msg中的type属性)] | 自定义消息类型 | { item } |\r\n| panel | 自定义扩展面板 | - |\r\n\r\n## 方法\r\n\r\n通过 ref 可以获取到 m-chat 实例并调用实例方法\r\n\r\n| 方法名 | 说明 | 参数 | 返回值 |\r\n| ----------- | ----------------- | -------------- | ------ |\r\n| switchPanel | 扩展面板显示/隐藏 | (flag:boolean) | - |\r\n\r\n## 使用须知\r\n\r\n### 录音\r\n从3.0版本开始组件主体不再内置H5录音相关具体实现,如果有需求利用`recordStart`,`recordCancel`,`recordStop`相关回调和 [Recorder](https://github.com/xiangyuecn/Recorder) 录音库进行开发。\r\n对于微信公众号环境可以调用`JSSDK`中内置的录音方法配合回调来进行开发。\r\n","readmeFilename":"README.md","_id":"@maybecode/m-chat@3.0.0","_nodeVersion":"14.18.0","_npmVersion":"6.14.15","dist":{"integrity":"sha512-tHjyd+ad3ZPhr6W0yESVCR45uNI5NyW/+gedYExN36zv0lNxT0vLFFGCDuGnCs+vjBIVOFi9WlBgwdef+nQ3Jg==","shasum":"12f5cc6cf4b3e3169ff3a75cfeea523655c8c47f","tarball":"https://registry.npmjs.org/@maybecode/m-chat/-/m-chat-3.0.0.tgz","fileCount":20,"unpackedSize":3800506,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAhlsTpF6gnZze/GrrcFnLhowlzzSV8b6Z/Agfbtug2MAiEAqlRRp76jWMGgxbkHK1MgQHSHLePtmFyxPUS/OD+TXZA="}]},"_npmUser":{"name":"qq1013480204","email":"1013480204@qq.com"},"directories":{},"maintainers":[{"name":"qq1013480204","email":"1013480204@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/m-chat_3.0.0_1684116235207_0.4089211719214587"},"_hasShrinkwrap":false},"3.0.1":{"name":"@maybecode/m-chat","version":"3.0.1","description":"Mobile IM Component","type":"module","style":"./dist/style.css","types":"./dist/index.d.ts","main":"./dist/m-chat.umd.cjs","module":"./dist/m-chat.js","exports":{".":{"import":"./dist/m-chat.js","require":"./dist/m-chat.umd.cjs"}},"scripts":{"dev":"vue-tsc --noEmit && vite build --config ./build/vite.config.ts --watch","build":"vue-tsc --noEmit && vite build --config ./build/vite.config.ts","test":"echo \"Error: no test specified\" && exit 1"},"devDependencies":{"@amap/amap-jsapi-loader":"^1.0.1","@jtsang/vite-plugin-style-import":"^2.0.0","@types/node":"^18.7.21","@vitejs/plugin-vue":"^3.1.0","@vueuse/core":"^10.1.2","any-touch":"^2.2.0","lodash":"^4.17.21","lottie-web":"^5.9.6","mitt":"^3.0.0","postcss-px-to-viewport-8-plugin":"^1.1.5","rollup-plugin-terser":"^7.0.2","sass":"^1.55.0","vant":"^3.6.3","vite":"^3.1.0","vite-plugin-dts":"^2.3.0","vite-plugin-libcss":"^1.0.5","vite-plugin-svgicon":"^1.3.1","vite-plugin-theme":"^0.8.6","vite-plugin-vue-setup-extend":"^0.4.0","vite-svg-loader":"^4.0.0","vue":"^3.2.37","vue-tsc":"^0.40.13"},"author":{"name":"maybe"},"license":"MIT","homepage":"https://gitee.com/null_639_5368/m-chat/v3","readme":"# m-chat\r\n基于vue3的拆箱即用的IM组件
\r\n\r\n[](https://www.npmjs.com/package/@maybecode/m-chat)\r\n\r\n[](https://www.npmjs.com/package/@maybecode/m-chat)\r\n\r\n\r\n\r\n## 功能\r\n\r\n* [x] 文字展示（支持html标签渲染）\r\n* [x] 图片展示和预览\r\n* [x] 视频播放\r\n* [x] 语音播放\r\n* [x] 自定义默认头像\r\n* [x] 下拉加载更多\r\n* [x] 图片/视频/语音发送功能\r\n* [x] 提供自定义类型插槽（custom）进行业务的定制\r\n* [x] 支持Typescript\r\n\r\n## 示例\r\n\r\n示例源码：参考`examples`目录下面的`App.vue`文件\r\n在线示例：[Demo](http://null_639_5368.gitee.io/m-chat)\r\n\r\n## 安装\r\n\r\n```\r\nnpm install @maybecode/m-chat@next\r\n```\r\n\r\n## Props\r\n\r\n| 参数 | 类型 | 默认值 | 说明 |\r\n| -------- | -------- | ------ | ------------------------------ |\r\n| messages | Array | [] | 消息数组 |\r\n| height | String | 100vh | 容器高度 |\r\n| refresh | Function | - | 刷新(加载更多)回调 |\r\n| config | Object | - | 高级配置(详情见下方config定义) |\r\n\r\n\r\n## config \r\n\r\n默认配置 具体的参数规则在编辑器中都会有提示\r\n\r\n```js\r\n{\r\n /**\r\n * 主题\r\n */\r\n theme: 'light',\r\n /**\r\n * 图片上传配置(vant) 文件、视频...以此类推\r\n * @doc vant-uploader https://vant-contrib.gitee.io/vant/#/zh-CN/uploader#props\r\n * @warn 如果和imageUploader中的配置存在冲突那么以imageUploader为准\r\n */\r\n vanImageUploader: {},\r\n /**\r\n * 图片上传\r\n */\r\n imageUploader: {\r\n /**\r\n * 文件大小限制，单位为 kb\r\n */\r\n maxSize: 500,\r\n /**\r\n * 允许的文件类型\r\n */\r\n accept: [\"image/*\"]\r\n },\r\n /**\r\n * 文件上传\r\n */\r\n fileUploader: {\r\n maxSize: 500,\r\n accept: ['*'],\r\n },\r\n /**\r\n * 视频上传\r\n */\r\n videoUploader: {\r\n maxSize: 500,\r\n accept: ['video/*']\r\n },\r\n /**\r\n * 开放的功能\r\n */\r\n open: [\"text\", \"emoji\", \"image\",\"audio\", \"file\", \"video\"],\r\n /**\r\n * 扩展主面板功能\r\n * @demo [{\r\n type: \"location\",\r\n text: \"定位\",\r\n icon: \"location-o\" // 支持http(s)地址或者vant自带的icon\r\n }]\r\n * @description 配置此选项将额外的功能item添加到列表中\r\n */\r\n extPanelItems: []\r\n}\r\n```\r\n## msg(消息)对象\r\n\r\n```\r\n {\r\n id: null, // 唯一id\r\n name: \"\", // 姓名\r\n avatar: \"\", // 头像地址\r\n self: false, // 是否是自己\r\n type: \"text\", // 类型: text|image|audio|video|file\r\n content:{\r\n text: \"\", // 文本\r\n duration: \"\", // 时长\r\n imageUrl: \"\", // 图片地址\r\n videoUrl: \"\", // 视频地址\r\n audioUrl: \"\", // 音频地址\r\n fileUrl: \"\", // 文件地址\r\n fileName: \"\", // 文件名称\r\n fileSize: \"\", // 文件大小\r\n fileExt: \"\", // 文件扩展名\r\n },\r\n isCancel:false // 控制该消息是否已经撤回,\r\n time:'' // 发送时间\r\n }\r\n```\r\n\r\n## 事件\r\n\r\n| 事件名 | 说明 | 回调参数 |\r\n| ------------ | ---------------------------------------- | --------------------------------- |\r\n| submit | 文字、图片、视频、语音、文件等等发送事件 | ({ type:string, content:object }) |\r\n| popItemClick | 气泡框点击事件 | ({ type:string, data:object }) |\r\n| recordStart | 录音开始 | - |\r\n| recordStop | 录音停止 | ({ blob:Blob, duration:number}) |\r\n| recordCancel | 录音取消 |\r\n\r\n## Slots\r\n\r\n| 名称 | 说明 | 参数 |\r\n| ----------------------------- | -------------- | -------- |\r\n| [custon(对应msg中的type属性)] | 自定义消息类型 | { item } |\r\n| panel | 自定义扩展面板 | - |\r\n\r\n## 方法\r\n\r\n通过 ref 可以获取到 m-chat 实例并调用实例方法\r\n\r\n| 方法名 | 说明 | 参数 | 返回值 |\r\n| ----------- | ----------------- | -------------- | ------ |\r\n| switchPanel | 扩展面板显示/隐藏 | (flag:boolean) | - |\r\n\r\n## 使用须知\r\n\r\n### 录音\r\n从3.0版本开始组件主体不再内置H5录音相关具体实现,如果有需求利用`recordStart`,`recordCancel`,`recordStop`相关回调和 [Recorder](https://github.com/xiangyuecn/Recorder) 录音库进行开发。\r\n对于微信公众号环境可以调用`JSSDK`中内置的录音方法配合回调来进行开发。\r\n","readmeFilename":"README.md","_id":"@maybecode/m-chat@3.0.1","_nodeVersion":"14.18.0","_npmVersion":"6.14.15","dist":{"integrity":"sha512-0GbEMBCb7ArErgjKyBa7/fxMb3KlNNqRmcTuNaCICAgFpFZqFaxwdTV/noODST3+R2FsAFPw3qKpjfQSXdD6hg==","shasum":"4a98ed9a862bbba40f3f501aa4cb8b724ba75e70","tarball":"https://registry.npmjs.org/@maybecode/m-chat/-/m-chat-3.0.1.tgz","fileCount":20,"unpackedSize":3800508,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIANg+jDdzFQtFB50emEC3ZQOwiim2V2jkpFNpZMAc7FjAiBlPWMzvEcIy/PbrhwaOECttjzQJRqLV3LPacH3/hoyDw=="}]},"_npmUser":{"name":"qq1013480204","email":"1013480204@qq.com"},"directories":{},"maintainers":[{"name":"qq1013480204","email":"1013480204@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/m-chat_3.0.1_1684116406759_0.40371853532523927"},"_hasShrinkwrap":false},"3.0.2":{"name":"@maybecode/m-chat","version":"3.0.2","description":"Mobile IM Component","type":"module","style":"./dist/style.css","types":"./dist/index.d.ts","main":"./dist/m-chat.umd.cjs","module":"./dist/m-chat.js","exports":{".":{"import":"./dist/m-chat.js","require":"./dist/m-chat.umd.cjs"}},"scripts":{"dev":"vue-tsc --noEmit && vite build --config ./build/vite.config.ts --watch","build":"vue-tsc --noEmit && vite build --config ./build/vite.config.ts","test":"echo \"Error: no test specified\" && exit 1"},"devDependencies":{"@amap/amap-jsapi-loader":"^1.0.1","@jtsang/vite-plugin-style-import":"^2.0.0","@types/node":"^18.7.21","@vitejs/plugin-vue":"^3.1.0","@vueuse/core":"^10.1.2","any-touch":"^2.2.0","lodash":"^4.17.21","lottie-web":"^5.9.6","mitt":"^3.0.0","postcss-px-to-viewport-8-plugin":"^1.1.5","rollup-plugin-terser":"^7.0.2","sass":"^1.55.0","vant":"^3.6.3","vite":"^3.1.0","vite-plugin-dts":"^2.3.0","vite-plugin-libcss":"^1.0.5","vite-plugin-svgicon":"^1.3.1","vite-plugin-theme":"^0.8.6","vite-plugin-vue-setup-extend":"^0.4.0","vite-svg-loader":"^4.0.0","vue":"^3.2.37","vue-tsc":"^0.40.13"},"author":{"name":"maybe"},"license":"MIT","homepage":"https://gitee.com/null_639_5368/m-chat/v3","readme":"# m-chat\r\n基于vue3的拆箱即用的IM组件
\r\n\r\n[](https://www.npmjs.com/package/@maybecode/m-chat)\r\n\r\n[](https://www.npmjs.com/package/@maybecode/m-chat)\r\n\r\n\r\n\r\n## 功能\r\n\r\n* [x] 文字展示（支持html标签渲染）\r\n* [x] 图片展示和预览\r\n* [x] 视频播放\r\n* [x] 语音播放\r\n* [x] 自定义默认头像\r\n* [x] 下拉加载更多\r\n* [x] 图片/视频/语音发送功能\r\n* [x] 提供自定义类型插槽（custom）进行业务的定制\r\n* [x] 支持Typescript\r\n\r\n## 示例\r\n\r\n示例源码：参考`examples`目录下面的`App.vue`文件\r\n在线示例：[Demo](http://null_639_5368.gitee.io/m-chat)\r\n\r\n## 安装\r\n\r\n```\r\nnpm install @maybecode/m-chat@next\r\n```\r\n\r\n## Props\r\n\r\n| 参数 | 类型 | 默认值 | 说明 |\r\n| -------- | -------- | ------ | ------------------------------ |\r\n| messages | Array | [] | 消息数组 |\r\n| height | String | 100vh | 容器高度 |\r\n| refresh | Function | - | 刷新(加载更多)回调 |\r\n| config | Object | - | 高级配置(详情见下方config定义) |\r\n\r\n\r\n## config \r\n\r\n默认配置 具体的参数规则在编辑器中都会有提示\r\n\r\n```js\r\n{\r\n /**\r\n * 主题\r\n */\r\n theme: 'light',\r\n /**\r\n * 图片上传配置(vant) 文件、视频...以此类推\r\n * @doc vant-uploader https://vant-contrib.gitee.io/vant/#/zh-CN/uploader#props\r\n * @warn 如果和imageUploader中的配置存在冲突那么以imageUploader为准\r\n */\r\n vanImageUploader: {},\r\n /**\r\n * 图片上传\r\n */\r\n imageUploader: {\r\n /**\r\n * 文件大小限制，单位为 kb\r\n */\r\n maxSize: 500,\r\n /**\r\n * 允许的文件类型\r\n */\r\n accept: [\"image/*\"]\r\n },\r\n /**\r\n * 文件上传\r\n */\r\n fileUploader: {\r\n maxSize: 500,\r\n accept: ['*'],\r\n },\r\n /**\r\n * 视频上传\r\n */\r\n videoUploader: {\r\n maxSize: 500,\r\n accept: ['video/*']\r\n },\r\n /**\r\n * 开放的功能\r\n */\r\n open: [\"text\", \"emoji\", \"image\",\"audio\", \"file\", \"video\"],\r\n /**\r\n * 扩展主面板功能\r\n * @demo [{\r\n type: \"location\",\r\n text: \"定位\",\r\n icon: \"location-o\" // 支持http(s)地址或者vant自带的icon\r\n }]\r\n * @description 配置此选项将额外的功能item添加到列表中\r\n */\r\n extPanelItems: []\r\n}\r\n```\r\n## msg(消息)对象\r\n\r\n```\r\n {\r\n id: null, // 唯一id\r\n name: \"\", // 姓名\r\n avatar: \"\", // 头像地址\r\n self: false, // 是否是自己\r\n type: \"text\", // 类型: text|image|audio|video|file\r\n content:{\r\n text: \"\", // 文本\r\n duration: \"\", // 时长\r\n imageUrl: \"\", // 图片地址\r\n videoUrl: \"\", // 视频地址\r\n audioUrl: \"\", // 音频地址\r\n fileUrl: \"\", // 文件地址\r\n fileName: \"\", // 文件名称\r\n fileSize: \"\", // 文件大小\r\n fileExt: \"\", // 文件扩展名\r\n },\r\n isCancel:false // 控制该消息是否已经撤回,\r\n time:'' // 发送时间\r\n }\r\n```\r\n\r\n## 事件\r\n\r\n| 事件名 | 说明 | 回调参数 |\r\n| ------------ | ---------------------------------------- | --------------------------------- |\r\n| submit | 文字、图片、视频、语音、文件等等发送事件 | ({ type:string, content:object }) |\r\n| popItemClick | 气泡框点击事件 | ({ type:string, data:object }) |\r\n| recordStart | 录音开始 | - |\r\n| recordStop | 录音停止 | ({ blob:Blob, duration:number}) |\r\n| recordCancel | 录音取消 |\r\n\r\n## Slots\r\n\r\n| 名称 | 说明 | 参数 |\r\n| ----------------------------- | -------------- | -------- |\r\n| [custon(对应msg中的type属性)] | 自定义消息类型 | { item } |\r\n| panel | 自定义扩展面板 | - |\r\n\r\n## 方法\r\n\r\n通过 ref 可以获取到 m-chat 实例并调用实例方法\r\n\r\n| 方法名 | 说明 | 参数 | 返回值 |\r\n| ----------- | ----------------- | -------------- | ------ |\r\n| switchPanel | 扩展面板显示/隐藏 | (flag:boolean) | - |\r\n\r\n## 使用须知\r\n\r\n### 录音\r\n从3.0版本开始组件主体不再内置H5录音相关具体实现,如果有需求利用`recordStart`,`recordCancel`,`recordStop`相关回调和 [Recorder](https://github.com/xiangyuecn/Recorder) 录音库进行开发。\r\n对于微信公众号环境可以调用`JSSDK`中内置的录音方法配合回调来进行开发。\r\n","readmeFilename":"README.md","_id":"@maybecode/m-chat@3.0.2","_nodeVersion":"14.18.0","_npmVersion":"6.14.15","dist":{"integrity":"sha512-HThDas4dTYywrRvJA+SKvz6vHF5wEC54IkTbjlCXz2eBq8yUXs5Om3CT2Spqma+Z6BxDtl63L4oxZx5SURXWtg==","shasum":"4d2c31f09ee6b7c2f400e48c06111281512ee3de","tarball":"https://registry.npmjs.org/@maybecode/m-chat/-/m-chat-3.0.2.tgz","fileCount":20,"unpackedSize":3800487,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC3WuQ0mE6+hTST23kZCZnl5fM0u//rAKzjK22BIYSPcwIhAOBM0+KVrph66YYHQRwcFYubpo86La4V44QiZLOGgQrH"}]},"_npmUser":{"name":"qq1013480204","email":"1013480204@qq.com"},"directories":{},"maintainers":[{"name":"qq1013480204","email":"1013480204@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/m-chat_3.0.2_1684810421057_0.7483769698436338"},"_hasShrinkwrap":false},"3.0.3":{"name":"@maybecode/m-chat","version":"3.0.3","description":"Mobile IM Component","type":"module","style":"./dist/style.css","types":"./dist/index.d.ts","main":"./dist/m-chat.umd.cjs","module":"./dist/m-chat.js","exports":{".":{"import":"./dist/m-chat.js","require":"./dist/m-chat.umd.cjs"}},"scripts":{"dev":"vue-tsc --noEmit && vite build --config ./build/vite.config.ts --watch","build":"vue-tsc --noEmit && vite build --config ./build/vite.config.ts","test":"echo \"Error: no test specified\" && exit 1"},"devDependencies":{"@amap/amap-jsapi-loader":"^1.0.1","@jtsang/vite-plugin-style-import":"^2.0.0","@types/node":"^18.7.21","@vitejs/plugin-vue":"^3.1.0","@vueuse/core":"^10.1.2","any-touch":"^2.2.0","lodash":"^4.17.21","lottie-web":"^5.9.6","mitt":"^3.0.0","postcss-px-to-viewport-8-plugin":"^1.1.5","rollup-plugin-terser":"^7.0.2","sass":"^1.55.0","vant":"^3.6.3","vite":"^3.1.0","vite-plugin-dts":"^2.3.0","vite-plugin-libcss":"^1.0.5","vite-plugin-svgicon":"^1.3.1","vite-plugin-theme":"^0.8.6","vite-plugin-vue-setup-extend":"^0.4.0","vite-svg-loader":"^4.0.0","vue":"^3.2.37","vue-tsc":"^0.40.13"},"author":{"name":"maybe"},"license":"MIT","homepage":"https://gitee.com/null_639_5368/m-chat/v3","readme":"# m-chat\r\n基于vue3的拆箱即用的IM组件
\r\n\r\n[](https://www.npmjs.com/package/@maybecode/m-chat)\r\n\r\n[](https://www.npmjs.com/package/@maybecode/m-chat)\r\n\r\n\r\n\r\n## 功能\r\n\r\n* [x] 文字展示（支持html标签渲染）\r\n* [x] 图片展示和预览\r\n* [x] 视频播放\r\n* [x] 语音播放\r\n* [x] 自定义默认头像\r\n* [x] 下拉加载更多\r\n* [x] 图片/视频/语音发送功能\r\n* [x] 提供自定义类型插槽（custom）进行业务的定制\r\n* [x] 支持Typescript\r\n\r\n## 示例\r\n\r\n示例源码：参考`examples`目录下面的`App.vue`文件\r\n在线示例：[Demo](http://null_639_5368.gitee.io/m-chat)\r\n\r\n## 安装\r\n\r\n```\r\nnpm install @maybecode/m-chat@next\r\n```\r\n\r\n## Props\r\n\r\n| 参数 | 类型 | 默认值 | 说明 |\r\n| ------------ | -------- | ------ | -------------------------------------- |\r\n| messages | Array | [] | 消息数组 |\r\n| height | String | 100vh | 容器高度 |\r\n| refresh | Function | - | 刷新(加载更多)回调 |\r\n| config | Object | - | 高级配置(详情见下方config定义) |\r\n| disabledPull | Boolean | false | 禁用下拉刷新(可用于下拉数据加载完成后) |\r\n\r\n\r\n## config \r\n\r\n默认配置 具体的参数规则在编辑器中都会有提示\r\n\r\n```js\r\n{\r\n /**\r\n * 主题\r\n */\r\n theme: 'light',\r\n /**\r\n * 图片上传配置(vant) 文件、视频...以此类推\r\n * @doc vant-uploader https://vant-contrib.gitee.io/vant/#/zh-CN/uploader#props\r\n * @warn 如果和imageUploader中的配置存在冲突那么以imageUploader为准\r\n */\r\n vanImageUploader: {},\r\n /**\r\n * 图片上传\r\n */\r\n imageUploader: {\r\n /**\r\n * 文件大小限制，单位为 kb\r\n */\r\n maxSize: 500,\r\n /**\r\n * 允许的文件类型\r\n */\r\n accept: [\"image/*\"]\r\n },\r\n /**\r\n * 文件上传\r\n */\r\n fileUploader: {\r\n maxSize: 500,\r\n accept: ['*'],\r\n },\r\n /**\r\n * 视频上传\r\n */\r\n videoUploader: {\r\n maxSize: 500,\r\n accept: ['video/*']\r\n },\r\n /**\r\n * 开放的功能\r\n */\r\n open: [\"text\", \"emoji\", \"image\",\"audio\", \"file\", \"video\"],\r\n /**\r\n * 扩展主面板功能\r\n * @demo [{\r\n type: \"location\",\r\n text: \"定位\",\r\n icon: \"location-o\" // 支持http(s)地址或者vant自带的icon\r\n }]\r\n * @description 配置此选项将额外的功能item添加到列表中\r\n */\r\n extPanelItems: []\r\n}\r\n```\r\n## msg(消息)对象\r\n\r\n```\r\n {\r\n id: null, // 唯一id\r\n name: \"\", // 姓名\r\n avatar: \"\", // 头像地址\r\n self: false, // 是否是自己\r\n type: \"text\", // 类型: text|image|audio|video|file\r\n content:{\r\n text: \"\", // 文本\r\n duration: \"\", // 时长\r\n imageUrl: \"\", // 图片地址\r\n videoUrl: \"\", // 视频地址\r\n audioUrl: \"\", // 音频地址\r\n fileUrl: \"\", // 文件地址\r\n fileName: \"\", // 文件名称\r\n fileSize: \"\", // 文件大小\r\n fileExt: \"\", // 文件扩展名\r\n },\r\n isCancel:false // 控制该消息是否已经撤回,\r\n time:'' // 发送时间\r\n }\r\n```\r\n\r\n## 事件\r\n\r\n| 事件名 | 说明 | 回调参数 |\r\n| ------------ | ---------------------------------------- | --------------------------------- |\r\n| submit | 文字、图片、视频、语音、文件等等发送事件 | ({ type:string, content:object }) |\r\n| popItemClick | 气泡框点击事件 | ({ type:string, data:object }) |\r\n| recordStart | 录音开始 | - |\r\n| recordStop | 录音停止 | ({ blob:Blob, duration:number}) |\r\n| recordCancel | 录音取消 |\r\n\r\n## Slots\r\n\r\n| 名称 | 说明 | 参数 |\r\n| ----------------------------- | -------------- | -------- |\r\n| [custom(对应msg中的type属性)] | 自定义消息类型 | { item } |\r\n| panel | 自定义扩展面板 | - |\r\n\r\n## 方法\r\n\r\n通过 ref 可以获取到 m-chat 实例并调用实例方法\r\n\r\n| 方法名 | 说明 | 参数 | 返回值 |\r\n| ----------- | ----------------- | -------------- | ------ |\r\n| switchPanel | 扩展面板显示/隐藏 | (flag:boolean) | - |\r\n\r\n## 使用须知\r\n\r\n### 录音\r\n从3.0版本开始组件主体不再内置H5录音相关具体实现,如果有需求利用`recordStart`,`recordCancel`,`recordStop`相关回调和 [Recorder](https://github.com/xiangyuecn/Recorder) 录音库进行开发。\r\n对于微信公众号环境可以调用`JSSDK`中内置的录音方法配合回调来进行开发。\r\n","readmeFilename":"README.md","_id":"@maybecode/m-chat@3.0.3","_nodeVersion":"14.18.0","_npmVersion":"6.14.15","dist":{"integrity":"sha512-1Omo/+9qLk9uTYCH1UtqzMv2+xuEd44WnXLOIDdZJTMp4u0EfHSs/GlwZay6fZdAHNHlHpOzrpleqkeTs4d2PQ==","shasum":"6532ac67b7e05badf9bc43e2cb19e0e9be1f443b","tarball":"https://registry.npmjs.org/@maybecode/m-chat/-/m-chat-3.0.3.tgz","fileCount":20,"unpackedSize":3804289,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDmqR9LMRp2BiqBypXUZjfBa0u5zw3ahDWY95KMWntD/wIhAIlczmMvRw/S9niJEN+rVcvChyIlZ/SU7lcRjuKBBQgY"}]},"_npmUser":{"name":"qq1013480204","email":"1013480204@qq.com"},"directories":{},"maintainers":[{"name":"qq1013480204","email":"1013480204@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/m-chat_3.0.3_1684827516932_0.45212612486041404"},"_hasShrinkwrap":false},"3.0.4":{"name":"@maybecode/m-chat","version":"3.0.4","description":"Mobile IM Component","type":"module","style":"./dist/style.css","types":"./dist/index.d.ts","main":"./dist/m-chat.umd.cjs","module":"./dist/m-chat.js","exports":{".":{"import":"./dist/m-chat.js","require":"./dist/m-chat.umd.cjs"}},"scripts":{"dev":"vue-tsc --noEmit && vite build --config ./build/vite.config.ts --watch","build":"vue-tsc --noEmit && vite build --config ./build/vite.config.ts","test":"echo \"Error: no test specified\" && exit 1"},"devDependencies":{"@amap/amap-jsapi-loader":"^1.0.1","@jtsang/vite-plugin-style-import":"^2.0.0","@types/node":"^18.7.21","@vitejs/plugin-vue":"^3.1.0","@vueuse/core":"^10.1.2","any-touch":"^2.2.0","lodash":"^4.17.21","lottie-web":"^5.9.6","mitt":"^3.0.0","postcss-px-to-viewport-8-plugin":"^1.1.5","rollup-plugin-terser":"^7.0.2","sass":"^1.55.0","vant":"^3.6.3","vite":"^3.1.0","vite-plugin-dts":"^2.3.0","vite-plugin-libcss":"^1.0.5","vite-plugin-svgicon":"^1.3.1","vite-plugin-theme":"^0.8.6","vite-plugin-vue-setup-extend":"^0.4.0","vite-svg-loader":"^4.0.0","vue":"^3.2.37","vue-tsc":"^0.40.13"},"author":{"name":"maybe"},"license":"MIT","homepage":"https://gitee.com/null_639_5368/m-chat/v3","readme":"# m-chat\r\n基于vue3的拆箱即用的IM组件
\r\n\r\n[](https://www.npmjs.com/package/@maybecode/m-chat)\r\n\r\n[](https://www.npmjs.com/package/@maybecode/m-chat)\r\n\r\n\r\n\r\n## 功能\r\n\r\n* [x] 文字展示（支持html标签渲染）\r\n* [x] 图片展示和预览\r\n* [x] 视频播放\r\n* [x] 语音播放\r\n* [x] 自定义默认头像\r\n* [x] 下拉加载更多\r\n* [x] 图片/视频/语音发送功能\r\n* [x] 提供自定义类型插槽（custom）进行业务的定制\r\n* [x] 支持Typescript\r\n\r\n## 示例\r\n\r\n示例源码：参考`examples`目录下面的`App.vue`文件\r\n在线示例：[Demo](http://null_639_5368.gitee.io/m-chat)\r\n\r\n## 安装\r\n\r\n```\r\nnpm install @maybecode/m-chat@next\r\n```\r\n\r\n## Props\r\n\r\n| 参数 | 类型 | 默认值 | 说明 |\r\n| ------------ | -------- | ------ | -------------------------------------- |\r\n| messages | Array | [] | 消息数组 |\r\n| height | String | 100vh | 容器高度 |\r\n| refresh | Function | - | 刷新(加载更多)回调 |\r\n| config | Object | - | 高级配置(详情见下方config定义) |\r\n| disabledPull | Boolean | false | 禁用下拉刷新(可用于下拉数据加载完成后) |\r\n\r\n\r\n## config \r\n\r\n默认配置 具体的参数规则在编辑器中都会有提示\r\n\r\n```js\r\n{\r\n /**\r\n * 主题\r\n */\r\n theme: 'light',\r\n /**\r\n * 图片上传配置(vant) 文件、视频...以此类推\r\n * @doc vant-uploader https://vant-contrib.gitee.io/vant/#/zh-CN/uploader#props\r\n * @warn 如果和imageUploader中的配置存在冲突那么以imageUploader为准\r\n */\r\n vanImageUploader: {},\r\n /**\r\n * 图片上传\r\n */\r\n imageUploader: {\r\n /**\r\n * 文件大小限制，单位为 kb\r\n */\r\n maxSize: 500,\r\n /**\r\n * 允许的文件类型\r\n */\r\n accept: [\"image/*\"]\r\n },\r\n /**\r\n * 文件上传\r\n */\r\n fileUploader: {\r\n maxSize: 500,\r\n accept: ['*'],\r\n },\r\n /**\r\n * 视频上传\r\n */\r\n videoUploader: {\r\n maxSize: 500,\r\n accept: ['video/*']\r\n },\r\n /**\r\n * 开放的功能\r\n */\r\n open: [\"text\", \"emoji\", \"image\",\"audio\", \"file\", \"video\"],\r\n /**\r\n * 扩展主面板功能\r\n * @demo [{\r\n type: \"location\",\r\n text: \"定位\",\r\n icon: \"location-o\" // 支持http(s)地址或者vant自带的icon\r\n }]\r\n * @description 配置此选项将额外的功能item添加到列表中\r\n */\r\n extPanelItems: []\r\n}\r\n```\r\n## msg(消息)对象\r\n\r\n```\r\n {\r\n id: null, // 唯一id\r\n name: \"\", // 姓名\r\n avatar: \"\", // 头像地址\r\n self: false, // 是否是自己\r\n type: \"text\", // 类型: text|image|audio|video|file\r\n content:{\r\n text: \"\", // 文本\r\n duration: \"\", // 时长\r\n imageUrl: \"\", // 图片地址\r\n videoUrl: \"\", // 视频地址\r\n audioUrl: \"\", // 音频地址\r\n fileUrl: \"\", // 文件地址\r\n fileName: \"\", // 文件名称\r\n fileSize: \"\", // 文件大小\r\n fileExt: \"\", // 文件扩展名\r\n },\r\n time:'' // 发送时间\r\n }\r\n```\r\n\r\n## 事件\r\n\r\n| 事件名 | 说明 | 回调参数 |\r\n| -------------- | ---------------------------------------- | --------------------------------- |\r\n| submit | 文字、图片、视频、语音、文件等等发送事件 | ({ type:string, content:object }) |\r\n| recordStart | 录音开始 | - |\r\n| recordStop | 录音停止 | ({ blob:Blob, duration:number}) |\r\n| recordCancel | 录音取消 |\r\n| clickAvatar | 点击头像 | (item:object) |\r\n| clickPanelItem | 点击面板item（用于自定义panel item） | (item:object) |\r\n\r\n## Slots\r\n\r\n| 名称 | 说明 | 参数 |\r\n| ----------------------------- | -------------- | -------- |\r\n| [custom(对应msg中的type属性)] | 自定义消息类型 | { item } |\r\n| panel | 自定义扩展面板 | - |\r\n\r\n## 方法\r\n\r\n通过 ref 可以获取到 m-chat 实例并调用实例方法\r\n\r\n| 方法名 | 说明 | 参数 | 返回值 |\r\n| ----------- | ----------------- | -------------- | ------ |\r\n| switchPanel | 扩展面板显示/隐藏 | (flag:boolean) | - |\r\n\r\n## 使用须知\r\n\r\n### 录音\r\n从3.0版本开始组件主体不再内置H5录音相关具体实现,如果有需求利用`recordStart`,`recordCancel`,`recordStop`相关回调和 [Recorder](https://github.com/xiangyuecn/Recorder) 录音库进行开发。\r\n对于微信公众号环境可以调用`JSSDK`中内置的录音方法配合回调来进行开发。\r\n","readmeFilename":"README.md","_id":"@maybecode/m-chat@3.0.4","_nodeVersion":"14.18.0","_npmVersion":"6.14.15","dist":{"integrity":"sha512-U8Hxj3JalJANKcoHDlnHSFVdmm8jzWjg3r4WjHI2bsEOc34r/TBgrgqOaJNENC7NITSG8dJPNnDwq2X8L0VqLg==","shasum":"bdc154e15f042c89e19a4fd141bee68891c275c4","tarball":"https://registry.npmjs.org/@maybecode/m-chat/-/m-chat-3.0.4.tgz","fileCount":19,"unpackedSize":3719349,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDKj/1E3r+e3HveVc1IZ93R8U++hF7Rhp9zL5UGETnkEAiEAwt1Eci+5PigDUnF5UB+Z55zlIYYPKQ9PFJU+jFqe4LI="}]},"_npmUser":{"name":"qq1013480204","email":"1013480204@qq.com"},"directories":{},"maintainers":[{"name":"qq1013480204","email":"1013480204@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/m-chat_3.0.4_1686276907225_0.5265987673627601"},"_hasShrinkwrap":false},"1.4.1":{"name":"@maybecode/m-chat","version":"1.4.1","private":false,"main":"lib-dist/m-chat.umd.min.js","types":"types/index.d.ts","scripts":{"dev":"vue-cli-service serve","build":"vue-cli-service build","build:lib":"vue-cli-service build --mode lib --target lib --name m-chat src/package/index.js ","test:unit":"vue-cli-service test:unit","lint":"vue-cli-service lint"},"dependencies":{"@better-scroll/core":"^2.3.1","@better-scroll/pull-down":"^2.3.1","@maybecode/m-chat":"^1.3.2","core-js":"^3.6.5","hammerjs":"^2.0.8","lodash":"^4.17.21","lottie-web":"^5.7.8","mitt":"^2.1.0","recorder-core":"^1.1.21021500","vant":"^2.12.20","vue":"^2.6.11","vue-router":"^3.2.0","vuex":"^3.4.0"},"devDependencies":{"@vue/cli-plugin-babel":"~4.5.0","@vue/cli-plugin-eslint":"~4.5.0","@vue/cli-plugin-router":"~4.5.0","@vue/cli-plugin-unit-jest":"~4.5.0","@vue/cli-plugin-vuex":"~4.5.0","@vue/cli-service":"~4.5.0","@vue/test-utils":"^1.0.3","babel-eslint":"^10.1.0","babel-plugin-import":"^1.13.3","eslint":"^6.7.2","eslint-plugin-vue":"^6.2.2","less":"^4.1.1","less-loader":"^6.0.0","sass":"^1.26.5","sass-loader":"^8.0.2","svg-url-loader":"^7.1.1","vue-template-compiler":"^2.6.11"},"repository":{"type":"git","url":"https://gitee.com/null_639_5368/m-chat.git"},"homepage":"https://gitee.com/null_639_5368/m-chat","license":"MIT","gitHead":"80373132e2c8d617e17f9f854a60b91086b44c1f","description":"[](https://www.npmjs.com/package/@maybecode/m-chat)\r [](https://www.npmjs.com/package/@maybecode/m-chat)\r [![npm](https://img.shields.io/b","_id":"@maybecode/m-chat@1.4.1","_nodeVersion":"14.18.0","_npmVersion":"6.14.15","dist":{"integrity":"sha512-UtspneztlqR/ovO7J3bc7QnXFQYxCP00aeZ+F9LFQYuBN7PWIFFPVMQ73+HmfEcDayY6Tx7daS4ns7TzNepN2w==","shasum":"87e22378b64c04ba56b8fa46d3d99156c8d0dba5","tarball":"https://registry.npmjs.org/@maybecode/m-chat/-/m-chat-1.4.1.tgz","fileCount":11,"unpackedSize":5025742,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCUL28lCAKMWSWMzKp61c7eVEd9LwwX0vsNNH3raEe01wIhAIqSeL/srdhxiAa86it89gspdMFkYPS9jfTL1U8yD4mw"}]},"_npmUser":{"name":"qq1013480204","email":"1013480204@qq.com"},"directories":{},"maintainers":[{"name":"qq1013480204","email":"1013480204@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/m-chat_1.4.1_1688380767693_0.0755005864954712"},"_hasShrinkwrap":false},"1.4.2":{"name":"@maybecode/m-chat","version":"1.4.2","private":false,"main":"lib-dist/m-chat.umd.min.js","types":"types/index.d.ts","scripts":{"dev":"vue-cli-service serve","build":"vue-cli-service build","build:lib":"vue-cli-service build --mode lib --target lib --name m-chat src/package/index.js ","test:unit":"vue-cli-service test:unit","lint":"vue-cli-service lint"},"dependencies":{"@better-scroll/core":"^2.3.1","@better-scroll/pull-down":"^2.3.1","@maybecode/m-chat":"^1.3.2","core-js":"^3.6.5","hammerjs":"^2.0.8","lodash":"^4.17.21","lottie-web":"^5.7.8","mitt":"^2.1.0","recorder-core":"^1.1.21021500","vant":"^2.12.20","vue":"^2.6.11","vue-router":"^3.2.0","vuex":"^3.4.0"},"devDependencies":{"@vue/cli-plugin-babel":"~4.5.0","@vue/cli-plugin-eslint":"~4.5.0","@vue/cli-plugin-router":"~4.5.0","@vue/cli-plugin-unit-jest":"~4.5.0","@vue/cli-plugin-vuex":"~4.5.0","@vue/cli-service":"~4.5.0","@vue/test-utils":"^1.0.3","babel-eslint":"^10.1.0","babel-plugin-import":"^1.13.3","eslint":"^6.7.2","eslint-plugin-vue":"^6.2.2","less":"^4.1.1","less-loader":"^6.0.0","sass":"^1.26.5","sass-loader":"^8.0.2","svg-url-loader":"^7.1.1","vue-template-compiler":"^2.6.11"},"repository":{"type":"git","url":"https://gitee.com/null_639_5368/m-chat.git"},"homepage":"https://gitee.com/null_639_5368/m-chat","license":"MIT","gitHead":"45cc8b6383098090156975e3827c83e376ba97f0","description":"[](https://www.npmjs.com/package/@maybecode/m-chat)\r [](https://www.npmjs.com/package/@maybecode/m-chat)\r [![npm](https://img.shields.io/b","_id":"@maybecode/m-chat@1.4.2","_nodeVersion":"14.18.0","_npmVersion":"6.14.15","dist":{"integrity":"sha512-py0v0Dx0qPhnYT6JIid6AQj9CNsRHJy1rZMQgu0pOESnXABsR8xmc4ipb3PQEyxdeEHxYMblZjCW8lIPVoFf7Q==","shasum":"06c7cd9c82c02a336d04c849a48b047d15f75d94","tarball":"https://registry.npmjs.org/@maybecode/m-chat/-/m-chat-1.4.2.tgz","fileCount":11,"unpackedSize":5030787,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDqb3BZG/gAhlza2ra2/cXauxRWRyMxG2Bg1KyzWo0UlQIgL5dto14Pwd2l7KOYKcp2iGligHamqTZwkHZTzXeuJS4="}]},"_npmUser":{"name":"qq1013480204","email":"1013480204@qq.com"},"directories":{},"maintainers":[{"name":"qq1013480204","email":"1013480204@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/m-chat_1.4.2_1688441992058_0.7995085987724282"},"_hasShrinkwrap":false},"3.0.5":{"name":"@maybecode/m-chat","version":"3.0.5","description":"Mobile IM Component","type":"module","style":"./dist/style.css","types":"./dist/index.d.ts","main":"./dist/m-chat.umd.cjs","module":"./dist/m-chat.js","exports":{".":{"import":"./dist/m-chat.js","require":"./dist/m-chat.umd.cjs"}},"scripts":{"dev":"vue-tsc --noEmit && vite build --mode dev --config ./build/vite.config.ts --watch","build":"vue-tsc --noEmit && vite build --config ./build/vite.config.ts","test":"echo \"Error: no test specified\" && exit 1"},"devDependencies":{"@amap/amap-jsapi-loader":"^1.0.1","@better-scroll/core":"^2.5.1","@jtsang/vite-plugin-style-import":"^2.0.0","@types/node":"^18.7.21","@vitejs/plugin-vue":"^3.1.0","@vueuse/core":"^10.1.2","any-touch":"^2.2.0","lodash":"^4.17.21","lottie-web":"^5.9.6","mitt":"^3.0.0","postcss-px-to-viewport-8-plugin":"^1.1.5","rollup-plugin-terser":"^7.0.2","sass":"^1.55.0","vant":"^3.6.3","vite":"^3.1.0","vite-plugin-dts":"^2.3.0","vite-plugin-libcss":"^1.0.5","vite-plugin-svgicon":"^1.3.1","vite-plugin-theme":"^0.8.6","vite-plugin-vue-setup-extend":"^0.4.0","vite-svg-loader":"^4.0.0","vue":"^3.2.37","vue-tsc":"^0.40.13"},"author":{"name":"maybe"},"license":"MIT","homepage":"https://gitee.com/null_639_5368/m-chat/v3","readme":"# m-chat\n基于vue3的拆箱即用的IM组件
\n\n[](https://www.npmjs.com/package/@maybecode/m-chat)\n\n\n\n\n## 功能\n\n* [x] 文字展示（支持html标签渲染）\n* [x] 图片展示和预览\n* [x] 视频播放\n* [x] 语音播放\n* [x] 自定义默认头像\n* [x] 下拉加载更多\n* [x] 图片/视频/语音发送功能\n* [x] 提供自定义类型插槽（custom）进行业务的定制\n* [x] 支持Typescript\n\n## 示例\n\n示例源码：参考`examples`目录下面的`App.vue`文件\n在线示例：[Demo](http://null_639_5368.gitee.io/m-chat)\n\n## 安装\n\n```\nnpm install @maybecode/m-chat@next\n```\n\n## Props\n\n| 参数 | 类型 | 默认值 | 说明 |\n| ------------ | ---------------- | ------ | -------------------------------------------------- |\n| messages | Array | [] | 消息数组 |\n| height | String | 100vh | 容器高度 |\n| refresh | Function | - | 刷新(加载更多)回调 |\n| config | Object | - | 高级配置(详情见下方config定义) |\n| disabledPull | Boolean | false | 禁用下拉刷新(可用于下拉数据加载完成后) |\n| historyId | [String, Number] | - | 历史信息最后一条id |\n| unReadId | [String, Number] | - | 第一条未读消息的id（默认滚动定位到第一条未读消息） |\n\n\n\n\n## config \n\n默认配置 具体的参数规则在编辑器中都会有提示\n\n```js\n{\n /**\n * 主题\n */\n theme: 'light',\n /**\n * 图片上传配置(vant) 文件、视频...以此类推\n * @doc vant-uploader https://vant-contrib.gitee.io/vant/#/zh-CN/uploader#props\n * @warn 如果和imageUploader中的配置存在冲突那么以imageUploader为准\n */\n vanImageUploader: {},\n /**\n * 图片上传\n */\n imageUploader: {\n /**\n * 文件大小限制，单位为 kb\n */\n maxSize: 500,\n /**\n * 允许的文件类型\n */\n accept: [\"image/*\"]\n },\n /**\n * 文件上传\n */\n fileUploader: {\n maxSize: 500,\n accept: ['*'],\n },\n /**\n * 视频上传\n */\n videoUploader: {\n maxSize: 500,\n accept: ['video/*']\n },\n /**\n * 开放的功能\n */\n open: [\"text\", \"emoji\", \"image\",\"audio\", \"file\", \"video\"],\n /**\n * 扩展主面板功能\n * @demo [{\n type: \"location\",\n text: \"定位\",\n icon: \"location-o\" // 支持http(s)地址或者vant自带的icon\n }]\n * @description 配置此选项将额外的功能item添加到列表中\n */\n extPanelItems: [],\n /**\n * 下拉功能\n */\n pullDown: false,\n /**\n * 已读未读功能\n */\n read: false\n}\n```\n## msg(消息)对象\n\n```\n {\n id: null, // 唯一id\n name: \"\", // 姓名\n avatar: \"\", // 头像地址\n self: false, // 是否是自己\n type: \"text\", // 类型: text|image|audio|video|file|custom(这个type是自定义的,对应插槽名称)\n block: false,// 是否为单独块元素（去除头像背景等等相关元素）\n clearBg: false, // 去除背景但保留头像名称等特异性信息\n content:{\n text: \"\", // 文本\n duration: \"\", // 时长\n imageUrl: \"\", // 图片地址\n videoUrl: \"\", // 视频地址\n audioUrl: \"\", // 音频地址\n fileUrl: \"\", // 文件地址\n fileName: \"\", // 文件名称\n fileSize: \"\", // 文件大小\n fileExt: \"\", // 文件扩展名\n },\n time:'' // 发送时间\n }\n```\n\n## 事件\n\n| 事件名 | 说明 | 回调参数 |\n| -------------- | ---------------------------------------- | --------------------------------- |\n| submit | 文字、图片、视频、语音、文件等等发送事件 | ({ type:string, content:object }) |\n| recordStart | 录音开始 | - |\n| recordStop | 录音停止 | ({ blob:Blob, duration:number}) |\n| recordCancel | 录音取消 |\n| clickAvatar | 点击头像 | (item:object) |\n| clickPanelItem | 点击面板item（用于自定义panel item） | (item:object) |\n\n## Slots\n\n| 名称 | 说明 | 参数 |\n| ----------------------------- | -------------- | -------- |\n| [custom(对应msg中的type属性)] | 自定义消息类型 | { item } |\n| panel | 自定义扩展面板 | - |\n\n## 方法\n\n通过 ref 可以获取到 m-chat 实例并调用实例方法\n\n| 方法名 | 说明 | 参数 | 返回值 |\n| ----------- | ----------------- | -------------- | ------ |\n| switchPanel | 扩展面板显示/隐藏 | (flag:boolean) | - |\n\n## 使用须知\n\n### 录音\n从3.0版本开始组件主体不再内置H5录音相关具体实现,如果有需求利用`recordStart`,`recordCancel`,`recordStop`相关回调和 [Recorder](https://github.com/xiangyuecn/Recorder) 录音库进行开发。\n对于微信公众号环境可以调用`JSSDK`中内置的录音方法配合回调来进行开发。\n","readmeFilename":"README.md","gitHead":"b8925714be7a4912568a6149548c80a88f179e85","_id":"@maybecode/m-chat@3.0.5","_nodeVersion":"16.20.1","_npmVersion":"8.19.4","dist":{"integrity":"sha512-5LvCAJXnKbmxwPYOTcFfKf6F1Bl3QZ6hE4SNOsFpddGVj+/x82n08t7+mNRrl/Vo3xcerUnpOR5955uBfG1/Pg==","shasum":"744b12b2820275d2b6991ec566ff5a30c70d7d5c","tarball":"https://registry.npmjs.org/@maybecode/m-chat/-/m-chat-3.0.5.tgz","fileCount":19,"unpackedSize":4175727,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCnuQgjljH6DNPmcWmXVy4CA4NhOMEd3TeebsV1r0g/pgIgEnQTkTialE+SexGlepmmiP8VR9CMPPqb+EM3XFUbDh8="}]},"_npmUser":{"name":"qq1013480204","email":"1013480204@qq.com"},"directories":{},"maintainers":[{"name":"qq1013480204","email":"1013480204@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/m-chat_3.0.5_1688982748142_0.5771258045851659"},"_hasShrinkwrap":false},"1.4.3":{"name":"@maybecode/m-chat","version":"1.4.3","private":false,"main":"lib-dist/m-chat.umd.min.js","types":"types/index.d.ts","scripts":{"dev":"vue-cli-service serve","build":"vue-cli-service build","build:lib":"vue-cli-service build --mode lib --target lib --name m-chat src/package/index.js ","test:unit":"vue-cli-service test:unit","lint":"vue-cli-service lint"},"dependencies":{"@better-scroll/core":"^2.3.1","@better-scroll/pull-down":"^2.3.1","@maybecode/m-chat":"^1.3.2","core-js":"^3.6.5","hammerjs":"^2.0.8","lodash":"^4.17.21","lottie-web":"^5.7.8","mitt":"^2.1.0","recorder-core":"^1.1.21021500","vant":"^2.12.20","vue":"^2.6.11","vue-router":"^3.2.0","vuex":"^3.4.0"},"devDependencies":{"@vue/cli-plugin-babel":"~4.5.0","@vue/cli-plugin-eslint":"~4.5.0","@vue/cli-plugin-router":"~4.5.0","@vue/cli-plugin-unit-jest":"~4.5.0","@vue/cli-plugin-vuex":"~4.5.0","@vue/cli-service":"~4.5.0","@vue/test-utils":"^1.0.3","babel-eslint":"^10.1.0","babel-plugin-import":"^1.13.3","eslint":"^6.7.2","eslint-plugin-vue":"^6.2.2","less":"^4.1.1","less-loader":"^6.0.0","sass":"^1.26.5","sass-loader":"^8.0.2","svg-url-loader":"^7.1.1","vue-template-compiler":"^2.6.11"},"repository":{"type":"git","url":"https://gitee.com/null_639_5368/m-chat.git"},"homepage":"https://gitee.com/null_639_5368/m-chat","license":"MIT","gitHead":"c3ebdcb443171eb17b2479b71456dc5a90a59249","description":"[](https://www.npmjs.com/package/@maybecode/m-chat)\r [](https://www.npmjs.com/package/@maybecode/m-chat)\r [![npm](https://img.shields.io/b","_id":"@maybecode/m-chat@1.4.3","_nodeVersion":"14.21.3","_npmVersion":"6.14.18","dist":{"integrity":"sha512-7dhwsSvFiJb6xSsmt4/x151xJgULcg/t64TO36YGIdTfX8NQxDjkYfAyFbGIx1vHs4TuU1dzh80nzBoItZTxkA==","shasum":"1f7833dc85c6346b7d516c9b568535066793e0c5","tarball":"https://registry.npmjs.org/@maybecode/m-chat/-/m-chat-1.4.3.tgz","fileCount":8908,"unpackedSize":160498230,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICMoOKaSvU0b59c9wgmX9prcbJMkJza2VM8GYSK0lioFAiEAj1CXum9ZsCeLQDZ2zzMaAaUZHshAL6mSuWRmzQIRRs8="}]},"_npmUser":{"name":"qq1013480204","email":"1013480204@qq.com"},"directories":{},"maintainers":[{"name":"qq1013480204","email":"1013480204@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/m-chat_1.4.3_1694516165204_0.8829937757327011"},"_hasShrinkwrap":false},"3.0.6":{"name":"@maybecode/m-chat","version":"3.0.6","description":"Mobile IM Component","type":"module","style":"./dist/style.css","types":"./dist/index.d.ts","main":"./dist/m-chat.umd.cjs","module":"./dist/m-chat.js","exports":{".":{"import":"./dist/m-chat.js","require":"./dist/m-chat.umd.cjs"},"./dist/style.css":{"import":"./dist/style.css","require":"./dist/style.css"}},"scripts":{"dev":"vue-tsc --noEmit && vite build --mode dev --config ./build/vite.config.ts --watch","build":"vue-tsc --noEmit && vite build --config ./build/vite.config.ts","test":"echo \"Error: no test specified\" && exit 1"},"devDependencies":{"@amap/amap-jsapi-loader":"^1.0.1","@better-scroll/core":"^2.5.1","@jtsang/vite-plugin-style-import":"^2.0.0","@types/node":"^18.7.21","@vitejs/plugin-vue":"^3.1.0","@vueuse/core":"^10.1.2","any-touch":"^2.2.0","lodash":"^4.17.21","lottie-web":"^5.9.6","mitt":"^3.0.0","postcss-px-to-viewport-8-plugin":"^1.1.5","rollup-plugin-terser":"^7.0.2","sass":"^1.55.0","vant":"^3.6.3","vite":"^3.1.0","vite-plugin-dts":"^2.3.0","vite-plugin-libcss":"^1.0.5","vite-plugin-svgicon":"^1.3.1","vite-plugin-theme":"^0.8.6","vite-plugin-vue-setup-extend":"^0.4.0","vite-svg-loader":"^4.0.0","vue":"^3.2.37","vue-tsc":"^0.40.13"},"author":{"name":"maybe"},"license":"MIT","homepage":"https://gitee.com/null_639_5368/m-chat/v3","_id":"@maybecode/m-chat@3.0.6","_nodeVersion":"14.21.3","_npmVersion":"6.14.18","dist":{"integrity":"sha512-YnLzzhGDTt2wk9Wyq54+sQYWO/T7rK8Mitujfe6AUpSVJ+fPVmjjbzcLTNv736HVsq7NigZST3ZYAXgVtohWMw==","shasum":"d6f021eea47d61e32b870f33cb3e15ece1f2b554","tarball":"https://registry.npmjs.org/@maybecode/m-chat/-/m-chat-3.0.6.tgz","fileCount":19,"unpackedSize":4186843,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFx1pTxK4yADaniOxGASSI1HsTp1D1exhduZ59vXqbadAiAaFlMFGlCwKjAsnFYm7n0amM/Fne/v0gixU0BTJ3sKXw=="}]},"_npmUser":{"name":"qq1013480204","email":"1013480204@qq.com"},"directories":{},"maintainers":[{"name":"qq1013480204","email":"1013480204@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/m-chat_3.0.6_1703501617198_0.7298209095810722"},"_hasShrinkwrap":false},"3.0.7":{"name":"@maybecode/m-chat","version":"3.0.7","description":"Mobile IM Component","type":"module","style":"./dist/style.css","types":"./dist/index.d.ts","main":"./dist/m-chat.umd.cjs","module":"./dist/m-chat.js","exports":{".":{"import":"./dist/m-chat.js","require":"./dist/m-chat.umd.cjs"},"./dist/style.css":{"import":"./dist/style.css","require":"./dist/style.css"}},"scripts":{"dev":"vue-tsc --noEmit && vite build --mode dev --config ./build/vite.config.ts --watch","build":"vue-tsc --noEmit && vite build --config ./build/vite.config.ts","test":"echo \"Error: no test specified\" && exit 1"},"devDependencies":{"@amap/amap-jsapi-loader":"^1.0.1","@better-scroll/core":"^2.5.1","@jtsang/vite-plugin-style-import":"^2.0.0","@types/node":"^18.7.21","@vitejs/plugin-vue":"^3.1.0","@vueuse/core":"^10.1.2","any-touch":"^2.2.0","lodash":"^4.17.21","lottie-web":"^5.9.6","mitt":"^3.0.0","postcss-px-to-viewport-8-plugin":"^1.1.5","rollup-plugin-terser":"^7.0.2","sass":"^1.55.0","vant":"^3.6.3","vite":"^3.1.0","vite-plugin-dts":"^2.3.0","vite-plugin-libcss":"^1.0.5","vite-plugin-svgicon":"^1.3.1","vite-plugin-theme":"^0.8.6","vite-plugin-vue-setup-extend":"^0.4.0","vite-svg-loader":"^4.0.0","vue":"^3.2.37","vue-tsc":"^0.40.13"},"author":{"name":"maybe"},"license":"MIT","homepage":"https://gitee.com/null_639_5368/m-chat/v3","readme":"# m-chat\r\n基于vue3的拆箱即用的IM组件
\r\n\r\n[](https://www.npmjs.com/package/@maybecode/m-chat)\r\n\r\n\r\n\r\n\r\n## 功能\r\n\r\n* [x] 文字展示（支持html标签渲染）\r\n* [x] 图片展示和预览\r\n* [x] 视频播放\r\n* [x] 语音播放\r\n* [x] 自定义默认头像\r\n* [x] 下拉加载更多\r\n* [x] 图片/视频/语音发送功能\r\n* [x] 提供自定义类型插槽（custom）进行业务的定制\r\n* [x] 支持Typescript\r\n\r\n## 示例\r\n\r\n示例源码：参考`examples`目录下面的`App.vue`文件\r\n在线示例：[Demo](http://null_639_5368.gitee.io/m-chat)\r\n\r\n## 安装\r\n\r\n```\r\nnpm install @maybecode/m-chat@next\r\n```\r\n\r\n## Props\r\n\r\n| 参数 | 类型 | 默认值 | 说明 |\r\n| ------------ | ---------------- | ------ | -------------------------------------------------- |\r\n| messages | Array | [] | 消息数组 |\r\n| height | String | 100vh | 容器高度 |\r\n| refresh | Function | - | 刷新(加载更多)回调 |\r\n| config | Object | - | 高级配置(详情见下方config定义) |\r\n| disabledPull | Boolean | false | 禁用下拉刷新(可用于下拉数据加载完成后) |\r\n| historyId | [String, Number] | - | 历史信息最后一条id |\r\n| unReadId | [String, Number] | - | 第一条未读消息的id（默认滚动定位到第一条未读消息） |\r\n\r\n\r\n\r\n\r\n## config \r\n\r\n默认配置 具体的参数规则在编辑器中都会有提示\r\n\r\n```js\r\n{\r\n /**\r\n * 主题\r\n */\r\n theme: 'light',\r\n /**\r\n * 图片上传配置(vant) 文件、视频...以此类推\r\n * @doc vant-uploader https://vant-contrib.gitee.io/vant/#/zh-CN/uploader#props\r\n * @warn 如果和imageUploader中的配置存在冲突那么以imageUploader为准\r\n */\r\n vanImageUploader: {},\r\n /**\r\n * 图片上传\r\n */\r\n imageUploader: {\r\n /**\r\n * 文件大小限制，单位为 kb\r\n */\r\n maxSize: 500,\r\n /**\r\n * 允许的文件类型\r\n */\r\n accept: [\"image/*\"]\r\n },\r\n /**\r\n * 文件上传\r\n */\r\n fileUploader: {\r\n maxSize: 500,\r\n accept: ['*'],\r\n },\r\n /**\r\n * 视频上传\r\n */\r\n videoUploader: {\r\n maxSize: 500,\r\n accept: ['video/*']\r\n },\r\n /**\r\n * 开放的功能\r\n */\r\n open: [\"text\", \"emoji\", \"image\",\"audio\", \"file\", \"video\"],\r\n /**\r\n * 扩展主面板功能\r\n * @demo [{\r\n type: \"location\",\r\n text: \"定位\",\r\n icon: \"location-o\" // 支持http(s)地址或者vant自带的icon\r\n }]\r\n * @description 配置此选项将额外的功能item添加到列表中\r\n */\r\n extPanelItems: [],\r\n /**\r\n * 下拉功能\r\n */\r\n pullDown: false,\r\n /**\r\n * 已读未读功能\r\n */\r\n read: false\r\n}\r\n```\r\n## msg(消息)对象\r\n\r\n```\r\n {\r\n id: null, // 唯一id\r\n name: \"\", // 姓名\r\n avatar: \"\", // 头像地址\r\n self: false, // 是否是自己\r\n type: \"text\", // 类型: text|image|audio|video|file|custom(这个type是自定义的,对应插槽名称)\r\n block: false,// 是否为单独块元素（去除头像背景等等相关元素）\r\n clearBg: false, // 去除背景但保留头像名称等特异性信息\r\n content:{\r\n text: \"\", // 文本\r\n duration: \"\", // 时长\r\n imageUrl: \"\", // 图片地址\r\n videoUrl: \"\", // 视频地址\r\n audioUrl: \"\", // 音频地址\r\n fileUrl: \"\", // 文件地址\r\n fileName: \"\", // 文件名称\r\n fileSize: \"\", // 文件大小\r\n fileExt: \"\", // 文件扩展名\r\n },\r\n time:'' // 发送时间\r\n }\r\n```\r\n\r\n## 事件\r\n\r\n| 事件名 | 说明 | 回调参数 |\r\n| -------------- | ---------------------------------------- | --------------------------------- |\r\n| submit | 文字、图片、视频、语音、文件等等发送事件 | ({ type:string, content:object }) |\r\n| recordStart | 录音开始 | - |\r\n| recordStop | 录音停止 | ({ blob:Blob, duration:number}) |\r\n| recordCancel | 录音取消 |\r\n| clickAvatar | 点击头像 | (item:object) |\r\n| clickPanelItem | 点击面板item（用于自定义panel item） | (item:object) |\r\n\r\n## Slots\r\n\r\n| 名称 | 说明 | 参数 |\r\n| ----------------------------- | -------------- | -------- |\r\n| [custom(对应msg中的type属性)] | 自定义消息类型 | { item } |\r\n| panel | 自定义扩展面板 | - |\r\n\r\n## 方法\r\n\r\n通过 ref 可以获取到 m-chat 实例并调用实例方法\r\n\r\n| 方法名 | 说明 | 参数 | 返回值 |\r\n| ----------- | ----------------- | -------------- | ------ |\r\n| switchPanel | 扩展面板显示/隐藏 | (flag:boolean) | - |\r\n\r\n## 使用须知\r\n\r\n### 录音\r\n从3.0版本开始组件主体不再内置H5录音相关具体实现,如果有需求利用`recordStart`,`recordCancel`,`recordStop`相关回调和 [Recorder](https://github.com/xiangyuecn/Recorder) 录音库进行开发。\r\n对于微信公众号环境可以调用`JSSDK`中内置的录音方法配合回调来进行开发。\r\n","readmeFilename":"README.md","_id":"@maybecode/m-chat@3.0.7","_nodeVersion":"14.21.3","_npmVersion":"6.14.18","dist":{"integrity":"sha512-sZN+ml2ciwlr2UmmsgyIBH1l2CtQctXQIo7QGcHBzuqf5skXIaNhyIlrSuJ+R4TmVE1ZDIQoX5YiBBQvK/r0aw==","shasum":"4dac1f80b4134c06dd29da08bb5dd3dcc48c5b81","tarball":"https://registry.npmjs.org/@maybecode/m-chat/-/m-chat-3.0.7.tgz","fileCount":19,"unpackedSize":4186843,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDH1QHFSD4//i5aVC58k21pD34bgUnVLiHlO4sTmaCMUQIhAPEC3RFa9mrKbdlLmoK/EXkamr141GhCEL82vQIjcHKk"}]},"_npmUser":{"name":"qq1013480204","email":"1013480204@qq.com"},"directories":{},"maintainers":[{"name":"qq1013480204","email":"1013480204@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/m-chat_3.0.7_1703501953965_0.5748857254157791"},"_hasShrinkwrap":false},"3.0.8":{"name":"@maybecode/m-chat","version":"3.0.8","description":"Mobile IM Component","type":"module","style":"./dist/style.css","types":"./dist/index.d.ts","main":"./dist/m-chat.umd.cjs","module":"./dist/m-chat.js","exports":{".":{"import":"./dist/m-chat.js","require":"./dist/m-chat.umd.cjs"},"./dist/style.css":{"import":"./dist/style.css","require":"./dist/style.css"}},"scripts":{"dev":"vue-tsc --noEmit && vite build --mode dev --config ./build/vite.config.ts --watch","build":"vue-tsc --noEmit && vite build --config ./build/vite.config.ts","test":"echo \"Error: no test specified\" && exit 1"},"devDependencies":{"@amap/amap-jsapi-loader":"^1.0.1","@better-scroll/core":"^2.5.1","@better-scroll/pull-down":"^2.5.1","@jtsang/vite-plugin-style-import":"^2.0.0","@rollup/plugin-terser":"^0.4.4","@types/node":"^18.7.21","@vitejs/plugin-vue":"^3.1.0","@vueuse/core":"^10.1.2","any-touch":"^2.2.0","lodash":"^4.17.21","lottie-web":"^5.9.6","mitt":"^3.0.0","postcss-px-to-viewport-8-plugin":"^1.1.5","sass":"^1.55.0","vant":"^3.6.3","vite":"^3.1.0","vite-plugin-dts":"^2.3.0","vite-plugin-libcss":"^1.0.5","vite-plugin-svgicon":"^1.3.1","vite-plugin-theme":"^0.8.6","vite-plugin-vue-setup-extend":"^0.4.0","vite-svg-loader":"^4.0.0","vue":"^3.2.37","vue-tsc":"^0.40.13"},"author":{"name":"maybe"},"license":"MIT","homepage":"https://gitee.com/null_639_5368/m-chat/v3","readme":"# m-chat\r\n基于vue3的拆箱即用的IM组件
\r\n\r\n[](https://www.npmjs.com/package/@maybecode/m-chat)\r\n\r\n\r\n\r\n\r\n## 功能\r\n\r\n* [x] 文字展示（支持html标签渲染）\r\n* [x] 图片展示和预览\r\n* [x] 视频播放\r\n* [x] 语音播放\r\n* [x] 自定义默认头像\r\n* [x] 下拉加载更多\r\n* [x] 图片/视频/语音发送功能\r\n* [x] 提供自定义类型插槽（custom）进行业务的定制\r\n* [x] 支持Typescript\r\n\r\n## 示例\r\n\r\n示例源码：参考`examples`目录下面的`App.vue`文件\r\n在线示例：[Demo](http://null_639_5368.gitee.io/m-chat)\r\n\r\n## 安装\r\n\r\n```\r\nnpm install @maybecode/m-chat@next\r\n```\r\n\r\n## Props\r\n\r\n| 参数 | 类型 | 默认值 | 说明 |\r\n| ------------ | ---------------- | ------ | -------------------------------------------------- |\r\n| messages | Array | [] | 消息数组 |\r\n| height | String | 100vh | 容器高度 |\r\n| refresh | Function | - | 刷新(加载更多)回调 |\r\n| config | Object | - | 高级配置(详情见下方config定义) |\r\n| disabledPull | Boolean | false | 禁用下拉刷新(可用于下拉数据加载完成后) |\r\n| historyId | [String, Number] | - | 历史信息最后一条id |\r\n| unReadId | [String, Number] | - | 第一条未读消息的id（默认滚动定位到第一条未读消息） |\r\n\r\n\r\n\r\n\r\n## config \r\n\r\n默认配置 具体的参数规则在编辑器中都会有提示\r\n\r\n```js\r\n{\r\n /**\r\n * 主题\r\n */\r\n theme: 'light',\r\n /**\r\n * 图片上传配置(vant) 文件、视频...以此类推\r\n * @doc vant-uploader https://vant-contrib.gitee.io/vant/#/zh-CN/uploader#props\r\n * @warn 如果和imageUploader中的配置存在冲突那么以imageUploader为准\r\n */\r\n vanImageUploader: {},\r\n /**\r\n * 图片上传\r\n */\r\n imageUploader: {\r\n /**\r\n * 文件大小限制，单位为 kb\r\n */\r\n maxSize: 500,\r\n /**\r\n * 允许的文件类型\r\n */\r\n accept: [\"image/*\"]\r\n },\r\n /**\r\n * 文件上传\r\n */\r\n fileUploader: {\r\n maxSize: 500,\r\n accept: ['*'],\r\n },\r\n /**\r\n * 视频上传\r\n */\r\n videoUploader: {\r\n maxSize: 500,\r\n accept: ['video/*']\r\n },\r\n /**\r\n * 开放的功能\r\n */\r\n open: [\"text\", \"emoji\", \"image\",\"audio\", \"file\", \"video\"],\r\n /**\r\n * 扩展主面板功能\r\n * @demo [{\r\n type: \"location\",\r\n text: \"定位\",\r\n icon: \"location-o\" // 支持http(s)地址或者vant自带的icon\r\n }]\r\n * @description 配置此选项将额外的功能item添加到列表中\r\n */\r\n extPanelItems: [],\r\n /**\r\n * 下拉功能\r\n */\r\n pullDown: false,\r\n /**\r\n * 已读未读功能\r\n */\r\n read: false\r\n}\r\n```\r\n## msg(消息)对象\r\n\r\n```\r\n {\r\n id: null, // 唯一id\r\n name: \"\", // 姓名\r\n avatar: \"\", // 头像地址\r\n self: false, // 是否是自己\r\n type: \"text\", // 类型: text|image|audio|video|file|custom(这个type是自定义的,对应插槽名称)\r\n block: false,// 是否为单独块元素（去除头像背景等等相关元素）\r\n clearBg: false, // 去除背景但保留头像名称等特异性信息\r\n content:{\r\n text: \"\", // 文本\r\n duration: \"\", // 时长\r\n imageUrl: \"\", // 图片地址\r\n videoUrl: \"\", // 视频地址\r\n audioUrl: \"\", // 音频地址\r\n fileUrl: \"\", // 文件地址\r\n fileName: \"\", // 文件名称\r\n fileSize: \"\", // 文件大小\r\n fileExt: \"\", // 文件扩展名\r\n },\r\n time:'' // 发送时间\r\n }\r\n```\r\n\r\n## 事件\r\n\r\n| 事件名 | 说明 | 回调参数 |\r\n| -------------- | ---------------------------------------- | --------------------------------- |\r\n| submit | 文字、图片、视频、语音、文件等等发送事件 | ({ type:string, content:object }) |\r\n| recordStart | 录音开始 | - |\r\n| recordStop | 录音停止 | ({ blob:Blob, duration:number}) |\r\n| recordCancel | 录音取消 |\r\n| clickAvatar | 点击头像 | (item:object) |\r\n| clickPanelItem | 点击面板item（用于自定义panel item） | (item:object) |\r\n\r\n## Slots\r\n\r\n| 名称 | 说明 | 参数 |\r\n| ----------------------------- | -------------- | -------- |\r\n| [custom(对应msg中的type属性)] | 自定义消息类型 | { item } |\r\n| panel | 自定义扩展面板 | - |\r\n\r\n## 方法\r\n\r\n通过 ref 可以获取到 m-chat 实例并调用实例方法\r\n\r\n| 方法名 | 说明 | 参数 | 返回值 |\r\n| ----------- | ----------------- | -------------- | ------ |\r\n| switchPanel | 扩展面板显示/隐藏 | (flag:boolean) | - |\r\n\r\n## 使用须知\r\n\r\n### 录音\r\n从3.0版本开始组件主体不再内置H5录音相关具体实现,如果有需求利用`recordStart`,`recordCancel`,`recordStop`相关回调和 [Recorder](https://github.com/xiangyuecn/Recorder) 录音库进行开发。\r\n对于微信公众号环境可以调用`JSSDK`中内置的录音方法配合回调来进行开发。\r\n","readmeFilename":"README.md","_id":"@maybecode/m-chat@3.0.8","_nodeVersion":"14.21.3","_npmVersion":"6.14.18","dist":{"integrity":"sha512-hrPpnscGJuFFq4cB9kRq7hR20Nn2/urlMudL8u5ewN9ze+fttSFiBRmzMPSYO2KSjuDNW6Ab2Y2bML66H4m8zA==","shasum":"2c98370c2f589152a105911b5008acd987d4a267","tarball":"https://registry.npmjs.org/@maybecode/m-chat/-/m-chat-3.0.8.tgz","fileCount":22,"unpackedSize":4183590,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC52e87AGtiPxNkIibE87oadHjqDT0RA52MIEB9HpqqCgIhAOFeoF6OP8LZWhp3YZx6l07riHXl8TVXq9QamrS1Nnm3"}]},"_npmUser":{"name":"qq1013480204","email":"1013480204@qq.com"},"directories":{},"maintainers":[{"name":"qq1013480204","email":"1013480204@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/m-chat_3.0.8_1703556637206_0.7349088321636605"},"_hasShrinkwrap":false},"1.4.4":{"name":"@maybecode/m-chat","version":"1.4.4","private":false,"main":"lib-dist/m-chat.umd.min.js","types":"types/index.d.ts","scripts":{"dev":"vue-cli-service serve","build":"vue-cli-service build","build:lib":"vue-cli-service build --mode lib --target lib --name m-chat src/package/index.js ","test:unit":"vue-cli-service test:unit","lint":"vue-cli-service lint"},"dependencies":{"@better-scroll/core":"^2.3.1","@better-scroll/pull-down":"^2.3.1","@maybecode/m-chat":"^1.3.2","core-js":"^3.6.5","hammerjs":"^2.0.8","lodash":"^4.17.21","lottie-web":"^5.7.8","mitt":"^2.1.0","recorder-core":"^1.1.21021500","vant":"^2.12.20","vue":"^2.6.11","vue-router":"^3.2.0","vuex":"^3.4.0"},"devDependencies":{"@vue/cli-plugin-babel":"~4.5.0","@vue/cli-plugin-eslint":"~4.5.0","@vue/cli-plugin-router":"~4.5.0","@vue/cli-plugin-unit-jest":"~4.5.0","@vue/cli-plugin-vuex":"~4.5.0","@vue/cli-service":"~4.5.0","@vue/test-utils":"^1.0.3","babel-eslint":"^10.1.0","babel-plugin-import":"^1.13.3","eslint":"^6.7.2","eslint-plugin-vue":"^6.2.2","less":"^4.1.1","less-loader":"^6.0.0","sass":"^1.26.5","sass-loader":"^8.0.2","svg-url-loader":"^7.1.1","vue-template-compiler":"^2.6.11"},"repository":{"type":"git","url":"https://gitee.com/null_639_5368/m-chat.git"},"homepage":"https://gitee.com/null_639_5368/m-chat","license":"MIT","gitHead":"c3ebdcb443171eb17b2479b71456dc5a90a59249","description":"[](https://www.npmjs.com/package/@maybecode/m-chat)\r [](https://www.npmjs.com/package/@maybecode/m-chat)\r [![npm](https://img.shields.io/b","_id":"@maybecode/m-chat@1.4.4","_nodeVersion":"14.21.3","_npmVersion":"6.14.18","dist":{"integrity":"sha512-0sI3CojZl6mIw4MMoj573/b++8XjCD2cBw05D2J9eZDrg+dEcf5yUx1mxWHAw2qJlM6rapGeH2vC5kHH+jtIWw==","shasum":"0adc0f8a2a61c778de25dc7cd5e34f459289870f","tarball":"https://registry.npmjs.org/@maybecode/m-chat/-/m-chat-1.4.4.tgz","fileCount":11,"unpackedSize":4427998,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICzmPdRozryMMA3NIfsMQEIl3dR0t+9v4NOduYOiPz1iAiEA0Cg395kWKUAD3NoUBMWbI4GxDk2wUdK2Lt7UVd0ZGqM="}]},"_npmUser":{"name":"qq1013480204","email":"1013480204@qq.com"},"directories":{},"maintainers":[{"name":"qq1013480204","email":"1013480204@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/m-chat_1.4.4_1703557051242_0.45733819755120364"},"_hasShrinkwrap":false},"3.0.9":{"name":"@maybecode/m-chat","version":"3.0.9","description":"Mobile IM Component","type":"module","style":"./dist/style.css","types":"./dist/index.d.ts","main":"./dist/m-chat.umd.cjs","module":"./dist/m-chat.js","exports":{".":{"import":"./dist/m-chat.js","require":"./dist/m-chat.umd.cjs"},"./dist/style.css":{"import":"./dist/style.css","require":"./dist/style.css"}},"scripts":{"dev":"vue-tsc --noEmit && vite build --mode dev --config ./build/vite.config.ts --watch","build":"vue-tsc --noEmit && vite build --config ./build/vite.config.ts","test":"echo \"Error: no test specified\" && exit 1"},"devDependencies":{"@amap/amap-jsapi-loader":"^1.0.1","@better-scroll/core":"^2.5.1","@better-scroll/pull-down":"^2.5.1","@jtsang/vite-plugin-style-import":"^2.0.0","@rollup/plugin-terser":"^0.4.4","@types/node":"^18.7.21","@vitejs/plugin-vue":"^3.1.0","@vueuse/core":"^10.1.2","any-touch":"^2.2.0","lodash":"^4.17.21","lottie-web":"^5.9.6","mitt":"^3.0.0","postcss-px-to-viewport-8-plugin":"^1.1.5","sass":"^1.55.0","vant":"^3.6.3","vite":"^3.1.0","vite-plugin-dts":"^2.3.0","vite-plugin-libcss":"^1.0.5","vite-plugin-svgicon":"^1.3.1","vite-plugin-theme":"^0.8.6","vite-plugin-vue-setup-extend":"^0.4.0","vite-svg-loader":"^4.0.0","vue":"^3.2.37","vue-tsc":"^0.40.13"},"author":{"name":"maybe"},"license":"MIT","homepage":"https://gitee.com/null_639_5368/m-chat/v3","readme":"# m-chat\r\n基于vue3的拆箱即用的IM组件
\r\n\r\n[](https://www.npmjs.com/package/@maybecode/m-chat)\r\n\r\n\r\n\r\n\r\n## 功能\r\n\r\n* [x] 文字展示（支持html标签渲染）\r\n* [x] 图片展示和预览\r\n* [x] 视频播放\r\n* [x] 语音播放\r\n* [x] 自定义默认头像\r\n* [x] 下拉加载更多\r\n* [x] 图片/视频/语音发送功能\r\n* [x] 提供自定义类型插槽（custom）进行业务的定制\r\n* [x] 支持Typescript\r\n\r\n## 示例\r\n\r\n示例源码：参考`examples`目录下面的`App.vue`文件\r\n在线示例：[Demo](http://null_639_5368.gitee.io/m-chat)\r\n\r\n## 安装\r\n\r\n```\r\nnpm install @maybecode/m-chat@next\r\n```\r\n\r\n## Props\r\n\r\n| 参数 | 类型 | 默认值 | 说明 |\r\n| ------------ | ---------------- | ------ | -------------------------------------------------- |\r\n| messages | Array | [] | 消息数组 |\r\n| height | String | 100vh | 容器高度 |\r\n| refresh | Function | - | 刷新(加载更多)回调 |\r\n| config | Object | - | 高级配置(详情见下方config定义) |\r\n| disabledPull | Boolean | false | 禁用下拉刷新(可用于下拉数据加载完成后) |\r\n| historyId | [String, Number] | - | 历史信息最后一条id |\r\n| unReadId | [String, Number] | - | 第一条未读消息的id（默认滚动定位到第一条未读消息） |\r\n\r\n\r\n\r\n\r\n## config \r\n\r\n默认配置 具体的参数规则在编辑器中都会有提示\r\n\r\n```js\r\n{\r\n /**\r\n * 主题\r\n */\r\n theme: 'light',\r\n /**\r\n * 图片上传配置(vant) 文件、视频...以此类推\r\n * @doc vant-uploader https://vant-contrib.gitee.io/vant/#/zh-CN/uploader#props\r\n * @warn 如果和imageUploader中的配置存在冲突那么以imageUploader为准\r\n */\r\n vanImageUploader: {},\r\n /**\r\n * 图片上传\r\n */\r\n imageUploader: {\r\n /**\r\n * 文件大小限制，单位为 kb\r\n */\r\n maxSize: 500,\r\n /**\r\n * 允许的文件类型\r\n */\r\n accept: [\"image/*\"]\r\n },\r\n /**\r\n * 文件上传\r\n */\r\n fileUploader: {\r\n maxSize: 500,\r\n accept: ['*'],\r\n },\r\n /**\r\n * 视频上传\r\n */\r\n videoUploader: {\r\n maxSize: 500,\r\n accept: ['video/*']\r\n },\r\n /**\r\n * 开放的功能\r\n */\r\n open: [\"text\", \"emoji\", \"image\",\"audio\", \"file\", \"video\"],\r\n /**\r\n * 扩展主面板功能\r\n * @demo [{\r\n type: \"location\",\r\n text: \"定位\",\r\n icon: \"location-o\" // 支持http(s)地址或者vant自带的icon\r\n }]\r\n * @description 配置此选项将额外的功能item添加到列表中\r\n */\r\n extPanelItems: [],\r\n /**\r\n * 下拉功能\r\n */\r\n pullDown: false,\r\n /**\r\n * 已读未读功能\r\n */\r\n read: false\r\n}\r\n```\r\n## msg(消息)对象\r\n\r\n```\r\n {\r\n id: null, // 唯一id\r\n name: \"\", // 姓名\r\n avatar: \"\", // 头像地址\r\n self: false, // 是否是自己\r\n type: \"text\", // 类型: text|image|audio|video|file|custom(这个type是自定义的,对应插槽名称)\r\n block: false,// 是否为单独块元素（去除头像背景等等相关元素）\r\n clearBg: false, // 去除背景但保留头像名称等特异性信息\r\n content:{\r\n text: \"\", // 文本\r\n duration: \"\", // 时长\r\n imageUrl: \"\", // 图片地址\r\n videoUrl: \"\", // 视频地址\r\n audioUrl: \"\", // 音频地址\r\n fileUrl: \"\", // 文件地址\r\n fileName: \"\", // 文件名称\r\n fileSize: \"\", // 文件大小\r\n fileExt: \"\", // 文件扩展名\r\n },\r\n time:'' // 发送时间\r\n }\r\n```\r\n\r\n## 事件\r\n\r\n| 事件名 | 说明 | 回调参数 |\r\n| -------------- | ---------------------------------------- | --------------------------------- |\r\n| submit | 文字、图片、视频、语音、文件等等发送事件 | ({ type:string, content:object }) |\r\n| recordStart | 录音开始 | - |\r\n| recordStop | 录音停止 | ({ blob:Blob, duration:number}) |\r\n| recordCancel | 录音取消 |\r\n| clickAvatar | 点击头像 | (item:object) |\r\n| clickPanelItem | 点击面板item（用于自定义panel item） | (item:object) |\r\n\r\n## Slots\r\n\r\n| 名称 | 说明 | 参数 |\r\n| ----------------------------- | -------------- | -------- |\r\n| [custom(对应msg中的type属性)] | 自定义消息类型 | { item } |\r\n| panel | 自定义扩展面板 | - |\r\n\r\n## 方法\r\n\r\n通过 ref 可以获取到 m-chat 实例并调用实例方法\r\n\r\n| 方法名 | 说明 | 参数 | 返回值 |\r\n| ----------- | ----------------- | -------------- | ------ |\r\n| switchPanel | 扩展面板显示/隐藏 | (flag:boolean) | - |\r\n\r\n## 使用须知\r\n\r\n### 录音\r\n从3.0版本开始组件主体不再内置H5录音相关具体实现,如果有需求利用`recordStart`,`recordCancel`,`recordStop`相关回调和 [Recorder](https://github.com/xiangyuecn/Recorder) 录音库进行开发。\r\n对于微信公众号环境可以调用`JSSDK`中内置的录音方法配合回调来进行开发。\r\n","readmeFilename":"README.md","_id":"@maybecode/m-chat@3.0.9","_nodeVersion":"14.21.3","_npmVersion":"6.14.18","dist":{"integrity":"sha512-GUQTQlnZmlGmuZ+QtlBI52CCk0q6xbJ9abJn5MSHPmXuQKnN7GXx+5SBfmNSKoW77xmeYuqZAcx3tKblL3nxkA==","shasum":"3df4d57691d1491713aee5420a39a78068c0d2c8","tarball":"https://registry.npmjs.org/@maybecode/m-chat/-/m-chat-3.0.9.tgz","fileCount":22,"unpackedSize":4188214,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDfSVFGbyy154Qv5ipnBc0jJ2gnFAFoSaE5L0C6dP/ZCAIgcjuRCnRAHFl2/0Uv+ScM3uXXQgv5M33x5jFrVS0kjug="}]},"_npmUser":{"name":"qq1013480204","email":"1013480204@qq.com"},"directories":{},"maintainers":[{"name":"qq1013480204","email":"1013480204@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/m-chat_3.0.9_1703571050073_0.23228402905773837"},"_hasShrinkwrap":false},"3.0.10":{"name":"@maybecode/m-chat","version":"3.0.10","description":"Mobile IM Component","type":"module","style":"./dist/style.css","types":"./dist/index.d.ts","main":"./dist/m-chat.umd.cjs","module":"./dist/m-chat.js","exports":{".":{"import":"./dist/m-chat.js","require":"./dist/m-chat.umd.cjs"},"./dist/style.css":{"import":"./dist/style.css","require":"./dist/style.css"}},"scripts":{"dev":"vue-tsc --noEmit && vite build --mode dev --config ./build/vite.config.ts --watch","build":"vue-tsc --noEmit && vite build --config ./build/vite.config.ts","test":"echo \"Error: no test specified\" && exit 1"},"devDependencies":{"@amap/amap-jsapi-loader":"^1.0.1","@better-scroll/core":"^2.5.1","@better-scroll/pull-down":"^2.5.1","@jtsang/vite-plugin-style-import":"^2.0.0","@rollup/plugin-terser":"^0.4.4","@types/node":"^18.7.21","@vitejs/plugin-vue":"^3.1.0","@vueuse/core":"^10.1.2","any-touch":"^2.2.0","lodash":"^4.17.21","lottie-web":"^5.9.6","mitt":"^3.0.0","postcss-px-to-viewport-8-plugin":"^1.1.5","sass":"^1.55.0","vant":"^3.6.3","vite":"^3.1.0","vite-plugin-dts":"^2.3.0","vite-plugin-libcss":"^1.0.5","vite-plugin-svgicon":"^1.3.1","vite-plugin-theme":"^0.8.6","vite-plugin-vue-setup-extend":"^0.4.0","vite-svg-loader":"^4.0.0","vue":"^3.2.37","vue-tsc":"^0.40.13"},"author":{"name":"maybe"},"license":"MIT","homepage":"https://gitee.com/null_639_5368/m-chat/v3","readme":"# m-chat\r\n基于vue3的拆箱即用的IM组件
\r\n\r\n[](https://www.npmjs.com/package/@maybecode/m-chat)\r\n\r\n\r\n\r\n\r\n## 功能\r\n\r\n* [x] 文字展示（支持html标签渲染）\r\n* [x] 图片展示和预览\r\n* [x] 视频播放\r\n* [x] 语音播放\r\n* [x] 自定义默认头像\r\n* [x] 下拉加载更多\r\n* [x] 图片/视频/语音发送功能\r\n* [x] 提供自定义类型插槽（custom）进行业务的定制\r\n* [x] 支持Typescript\r\n\r\n## 示例\r\n\r\n示例源码：参考`examples`目录下面的`App.vue`文件\r\n在线示例：[Demo](http://null_639_5368.gitee.io/m-chat)\r\n\r\n## 安装\r\n\r\n```\r\nnpm install @maybecode/m-chat@next\r\n```\r\n\r\n## Props\r\n\r\n| 参数 | 类型 | 默认值 | 说明 |\r\n| ------------ | ---------------- | ------ | -------------------------------------------------- |\r\n| messages | Array | [] | 消息数组 |\r\n| height | String | 100vh | 容器高度 |\r\n| refresh | Function | - | 刷新(加载更多)回调 |\r\n| config | Object | - | 高级配置(详情见下方config定义) |\r\n| disabledPull | Boolean | false | 禁用下拉刷新(可用于下拉数据加载完成后) |\r\n| historyId | [String, Number] | - | 历史信息最后一条id |\r\n| unReadId | [String, Number] | - | 第一条未读消息的id（默认滚动定位到第一条未读消息） |\r\n\r\n\r\n\r\n\r\n## config \r\n\r\n默认配置 具体的参数规则在编辑器中都会有提示\r\n\r\n```js\r\n{\r\n /**\r\n * 主题\r\n */\r\n theme: 'light',\r\n /**\r\n * 图片上传配置(vant) 文件、视频...以此类推\r\n * @doc vant-uploader https://vant-contrib.gitee.io/vant/#/zh-CN/uploader#props\r\n * @warn 如果和imageUploader中的配置存在冲突那么以imageUploader为准\r\n */\r\n vanImageUploader: {},\r\n /**\r\n * 图片上传\r\n */\r\n imageUploader: {\r\n /**\r\n * 文件大小限制，单位为 kb\r\n */\r\n maxSize: 500,\r\n /**\r\n * 允许的文件类型\r\n */\r\n accept: [\"image/*\"]\r\n },\r\n /**\r\n * 文件上传\r\n */\r\n fileUploader: {\r\n maxSize: 500,\r\n accept: ['*'],\r\n },\r\n /**\r\n * 视频上传\r\n */\r\n videoUploader: {\r\n maxSize: 500,\r\n accept: ['video/*']\r\n },\r\n /**\r\n * 开放的功能\r\n */\r\n open: [\"text\", \"emoji\", \"image\",\"audio\", \"file\", \"video\"],\r\n /**\r\n * 扩展主面板功能\r\n * @demo [{\r\n type: \"location\",\r\n text: \"定位\",\r\n icon: \"location-o\" // 支持http(s)地址或者vant自带的icon\r\n }]\r\n * @description 配置此选项将额外的功能item添加到列表中\r\n */\r\n extPanelItems: [],\r\n /**\r\n * 下拉功能\r\n */\r\n pullDown: false,\r\n /**\r\n * 已读未读功能\r\n */\r\n read: false\r\n}\r\n```\r\n## msg(消息)对象\r\n\r\n```\r\n {\r\n id: null, // 唯一id\r\n name: \"\", // 姓名\r\n avatar: \"\", // 头像地址\r\n self: false, // 是否是自己\r\n type: \"text\", // 类型: text|image|audio|video|file|custom(这个type是自定义的,对应插槽名称)\r\n block: false,// 是否为单独块元素（去除头像背景等等相关元素）\r\n clearBg: false, // 去除背景但保留头像名称等特异性信息\r\n content:{\r\n text: \"\", // 文本\r\n duration: \"\", // 时长\r\n imageUrl: \"\", // 图片地址\r\n videoUrl: \"\", // 视频地址\r\n audioUrl: \"\", // 音频地址\r\n fileUrl: \"\", // 文件地址\r\n fileName: \"\", // 文件名称\r\n fileSize: \"\", // 文件大小\r\n fileExt: \"\", // 文件扩展名\r\n },\r\n time:'' // 发送时间\r\n }\r\n```\r\n\r\n## 事件\r\n\r\n| 事件名 | 说明 | 回调参数 |\r\n| -------------- | ---------------------------------------- | --------------------------------- |\r\n| submit | 文字、图片、视频、语音、文件等等发送事件 | ({ type:string, content:object }) |\r\n| recordStart | 录音开始 | |\r\n| recordStop | 录音停止 | |\r\n| recordCancel | 录音取消 | |\r\n| clickAvatar | 点击头像 | (item:object) |\r\n| clickPanelItem | 点击面板item（用于自定义panel item） | (item:object) |\r\n\r\n## Slots\r\n\r\n| 名称 | 说明 | 参数 |\r\n| ----------------------------- | -------------- | -------- |\r\n| [custom(对应msg中的type属性)] | 自定义消息类型 | { item } |\r\n| panel | 自定义扩展面板 | - |\r\n\r\n## 方法\r\n\r\n通过 ref 可以获取到 m-chat 实例并调用实例方法\r\n\r\n| 方法名 | 说明 | 参数 | 返回值 |\r\n| ----------- | ----------------- | -------------- | ------ |\r\n| switchPanel | 扩展面板显示/隐藏 | (flag:boolean) | - |\r\n\r\n## 使用须知\r\n\r\n### 录音\r\n从3.0版本开始组件主体不再内置H5录音相关具体实现,如果有需求利用`recordStart`,`recordCancel`,`recordStop`相关回调和 [Recorder](https://github.com/xiangyuecn/Recorder) 录音库进行开发。\r\n对于微信公众号环境可以调用`JSSDK`中内置的录音方法配合回调来进行开发。\r\n","readmeFilename":"README.md","_id":"@maybecode/m-chat@3.0.10","_nodeVersion":"14.21.3","_npmVersion":"6.14.18","dist":{"integrity":"sha512-pAt5i/+yJm6NpW+Q6wwGJ5uKSCw9gh/uaw5KQzNtT0KQjaI1jQnaAFztAELA08ukf/50u+IX/ji7hP1SBXksNw==","shasum":"906f495a4027a10e505b1dd47929a925782b144e","tarball":"https://registry.npmjs.org/@maybecode/m-chat/-/m-chat-3.0.10.tgz","fileCount":22,"unpackedSize":4194411,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCu//WKBPN1QHgcTpogygNgkCNquHHIY+ei30vaN+3c7AIgMigkm7SByv2JJE75ZByU60EqptTpHpKTfsI6oeSXMUM="}]},"_npmUser":{"name":"qq1013480204","email":"1013480204@qq.com"},"directories":{},"maintainers":[{"name":"qq1013480204","email":"1013480204@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/m-chat_3.0.10_1703586866831_0.8606708263106733"},"_hasShrinkwrap":false},"3.0.11":{"name":"@maybecode/m-chat","version":"3.0.11","description":"Mobile IM Component","type":"module","style":"./dist/style.css","types":"./dist/index.d.ts","main":"./dist/m-chat.umd.cjs","module":"./dist/m-chat.js","exports":{".":{"import":"./dist/m-chat.js","require":"./dist/m-chat.umd.cjs"},"./dist/style.css":{"import":"./dist/style.css","require":"./dist/style.css"}},"scripts":{"dev":"vue-tsc --noEmit && vite build --mode dev --config ./build/vite.config.ts --watch","build":"vue-tsc --noEmit && vite build --config ./build/vite.config.ts","test":"echo \"Error: no test specified\" && exit 1"},"devDependencies":{"@amap/amap-jsapi-loader":"^1.0.1","@better-scroll/core":"^2.5.1","@better-scroll/pull-down":"^2.5.1","@jtsang/vite-plugin-style-import":"^2.0.0","@rollup/plugin-terser":"^0.4.4","@types/node":"^18.7.21","@vitejs/plugin-vue":"^3.1.0","@vueuse/core":"^10.1.2","any-touch":"^2.2.0","lodash":"^4.17.21","lottie-web":"^5.9.6","mitt":"^3.0.0","postcss-px-to-viewport-8-plugin":"^1.1.5","sass":"^1.55.0","vant":"^3.6.3","vite":"^3.1.0","vite-plugin-dts":"^2.3.0","vite-plugin-libcss":"^1.0.5","vite-plugin-svgicon":"^1.3.1","vite-plugin-theme":"^0.8.6","vite-plugin-vue-setup-extend":"^0.4.0","vite-svg-loader":"^4.0.0","vue":"^3.2.37","vue-tsc":"^0.40.13"},"author":{"name":"maybe"},"license":"MIT","homepage":"https://gitee.com/null_639_5368/m-chat/v3","readme":"# m-chat\r\n基于vue3的拆箱即用的IM组件
\r\n\r\n[](https://www.npmjs.com/package/@maybecode/m-chat)\r\n\r\n\r\n\r\n\r\n## 功能\r\n\r\n* [x] 文字展示（支持html标签渲染）\r\n* [x] 图片展示和预览\r\n* [x] 视频播放\r\n* [x] 语音播放\r\n* [x] 自定义默认头像\r\n* [x] 下拉加载更多\r\n* [x] 图片/视频/语音发送功能\r\n* [x] 提供自定义类型插槽（custom）进行业务的定制\r\n* [x] 支持Typescript\r\n\r\n## 示例\r\n\r\n示例源码：参考`examples`目录下面的`App.vue`文件\r\n在线示例：[Demo](http://null_639_5368.gitee.io/m-chat)\r\n\r\n## 安装\r\n\r\n```\r\nnpm install @maybecode/m-chat@next\r\n```\r\n\r\n## Props\r\n\r\n| 参数 | 类型 | 默认值 | 说明 |\r\n| ------------ | ---------------- | ------ | -------------------------------------------------- |\r\n| messages | Array | [] | 消息数组 |\r\n| height | String | 100vh | 容器高度 |\r\n| refresh | Function | - | 刷新(加载更多)回调 |\r\n| config | Object | - | 高级配置(详情见下方config定义) |\r\n| disabledPull | Boolean | false | 禁用下拉刷新(可用于下拉数据加载完成后) |\r\n| historyId | [String, Number] | - | 历史信息最后一条id |\r\n| unReadId | [String, Number] | - | 第一条未读消息的id（默认滚动定位到第一条未读消息） |\r\n| beforeRecord | Function | - | 录音前执行函数 （可用于初始化录音相关） |\r\n\r\n\r\n\r\n\r\n## config \r\n\r\n默认配置 具体的参数规则在编辑器中都会有提示\r\n\r\n```js\r\n{\r\n /**\r\n * 主题\r\n */\r\n theme: 'light',\r\n /**\r\n * 图片上传配置(vant) 文件、视频...以此类推\r\n * @doc vant-uploader https://vant-contrib.gitee.io/vant/#/zh-CN/uploader#props\r\n * @warn 如果和imageUploader中的配置存在冲突那么以imageUploader为准\r\n */\r\n vanImageUploader: {},\r\n /**\r\n * 图片上传\r\n */\r\n imageUploader: {\r\n /**\r\n * 文件大小限制，单位为 kb\r\n */\r\n maxSize: 500,\r\n /**\r\n * 允许的文件类型\r\n */\r\n accept: [\"image/*\"]\r\n },\r\n /**\r\n * 文件上传\r\n */\r\n fileUploader: {\r\n maxSize: 500,\r\n accept: ['*'],\r\n },\r\n /**\r\n * 视频上传\r\n */\r\n videoUploader: {\r\n maxSize: 500,\r\n accept: ['video/*']\r\n },\r\n /**\r\n * 开放的功能\r\n */\r\n open: [\"text\", \"emoji\", \"image\",\"audio\", \"file\", \"video\"],\r\n /**\r\n * 扩展主面板功能\r\n * @demo [{\r\n type: \"location\",\r\n text: \"定位\",\r\n icon: \"location-o\" // 支持http(s)地址或者vant自带的icon\r\n }]\r\n * @description 配置此选项将额外的功能item添加到列表中\r\n */\r\n extPanelItems: [],\r\n /**\r\n * 下拉功能\r\n */\r\n pullDown: false,\r\n /**\r\n * 已读未读功能\r\n */\r\n read: false\r\n}\r\n```\r\n## msg(消息)对象\r\n\r\n```\r\n {\r\n id: null, // 唯一id\r\n name: \"\", // 姓名\r\n avatar: \"\", // 头像地址\r\n self: false, // 是否是自己\r\n type: \"text\", // 类型: text|image|audio|video|file|custom(这个type是自定义的,对应插槽名称)\r\n block: false,// 是否为单独块元素（去除头像背景等等相关元素）\r\n clearBg: false, // 去除背景但保留头像名称等特异性信息\r\n content:{\r\n text: \"\", // 文本\r\n duration: \"\", // 时长\r\n imageUrl: \"\", // 图片地址\r\n videoUrl: \"\", // 视频地址\r\n audioUrl: \"\", // 音频地址\r\n fileUrl: \"\", // 文件地址\r\n fileName: \"\", // 文件名称\r\n fileSize: \"\", // 文件大小\r\n fileExt: \"\", // 文件扩展名\r\n },\r\n time:'' // 发送时间\r\n }\r\n```\r\n\r\n## 事件\r\n\r\n| 事件名 | 说明 | 回调参数 |\r\n| -------------- | ---------------------------------------- | --------------------------------- |\r\n| submit | 文字、图片、视频、语音、文件等等发送事件 | ({ type:string, content:object }) |\r\n| recordStart | 录音开始 | |\r\n| recordStop | 录音停止 | |\r\n| recordCancel | 录音取消 | |\r\n| clickAvatar | 点击头像 | (item:object) |\r\n| clickPanelItem | 点击面板item（用于自定义panel item） | (item:object) |\r\n\r\n## Slots\r\n\r\n| 名称 | 说明 | 参数 |\r\n| ----------------------------- | -------------- | -------- |\r\n| [custom(对应msg中的type属性)] | 自定义消息类型 | { item } |\r\n| panel | 自定义扩展面板 | - |\r\n\r\n## 方法\r\n\r\n通过 ref 可以获取到 m-chat 实例并调用实例方法\r\n\r\n| 方法名 | 说明 | 参数 | 返回值 |\r\n| ----------- | ----------------- | -------------- | ------ |\r\n| switchPanel | 扩展面板显示/隐藏 | (flag:boolean) | - |\r\n\r\n## 使用须知\r\n\r\n### 录音\r\n从3.0版本开始组件主体不再内置H5录音相关具体实现,如果有需求利用`recordStart`,`recordCancel`,`recordStop`相关回调和 [Recorder](https://github.com/xiangyuecn/Recorder) 录音库进行开发。\r\n对于微信公众号环境可以调用`JSSDK`中内置的录音方法配合回调来进行开发。\r\n","readmeFilename":"README.md","_id":"@maybecode/m-chat@3.0.11","_nodeVersion":"14.21.3","_npmVersion":"6.14.18","dist":{"integrity":"sha512-CEdcR/J0b13i7frtTavqBSeiBkr9T/0ZASpLaZKP6+aOAycsgtfsoVGMg7taxGeS0OmQAQBMACTIsvTWhQ97cQ==","shasum":"e1defb63cc74712b02618ad8c594aaeef5b94e19","tarball":"https://registry.npmjs.org/@maybecode/m-chat/-/m-chat-3.0.11.tgz","fileCount":22,"unpackedSize":4190409,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEJcy7cle5i15Y1UKD3MsnAvs9YdPaF40uV5bSfkkvXEAiBAfQ+to2E6npbp+pEHZAoiT1ITe1G9kjCvgVds7k4FWQ=="}]},"_npmUser":{"name":"qq1013480204","email":"1013480204@qq.com"},"directories":{},"maintainers":[{"name":"qq1013480204","email":"1013480204@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/m-chat_3.0.11_1703819078360_0.7874659592004412"},"_hasShrinkwrap":false},"3.0.12":{"name":"@maybecode/m-chat","version":"3.0.12","description":"Mobile IM Component","type":"module","style":"./dist/style.css","types":"./dist/index.d.ts","main":"./dist/m-chat.umd.cjs","module":"./dist/m-chat.js","exports":{".":{"import":"./dist/m-chat.js","require":"./dist/m-chat.umd.cjs"},"./dist/style.css":{"import":"./dist/style.css","require":"./dist/style.css"}},"scripts":{"dev":"vue-tsc --noEmit && vite build --mode dev --config ./build/vite.config.ts --watch","build":"vue-tsc --noEmit && vite build --config ./build/vite.config.ts","test":"echo \"Error: no test specified\" && exit 1"},"devDependencies":{"@amap/amap-jsapi-loader":"^1.0.1","@better-scroll/core":"^2.5.1","@better-scroll/pull-down":"^2.5.1","@jtsang/vite-plugin-style-import":"^2.0.0","@rollup/plugin-terser":"^0.4.4","@types/node":"^18.7.21","@vitejs/plugin-vue":"^3.1.0","@vueuse/core":"^10.1.2","any-touch":"^2.2.0","lodash":"^4.17.21","lottie-web":"^5.9.6","mitt":"^3.0.0","postcss-px-to-viewport-8-plugin":"^1.1.5","sass":"^1.55.0","vant":"^3.6.3","vite":"^3.1.0","vite-plugin-dts":"^2.3.0","vite-plugin-libcss":"^1.0.5","vite-plugin-svgicon":"^1.3.1","vite-plugin-theme":"^0.8.6","vite-plugin-vue-setup-extend":"^0.4.0","vite-svg-loader":"^4.0.0","vue":"^3.2.37","vue-tsc":"^0.40.13"},"author":{"name":"maybe"},"license":"MIT","homepage":"https://gitee.com/null_639_5368/m-chat/v3","readme":"# m-chat\r\n基于vue3的拆箱即用的IM组件
\r\n\r\n[](https://www.npmjs.com/package/@maybecode/m-chat)\r\n\r\n\r\n\r\n\r\n## 功能\r\n\r\n* [x] 文字展示（支持html标签渲染）\r\n* [x] 图片展示和预览\r\n* [x] 视频播放\r\n* [x] 语音播放\r\n* [x] 自定义默认头像\r\n* [x] 下拉加载更多\r\n* [x] 图片/视频/语音发送功能\r\n* [x] 提供自定义类型插槽（custom）进行业务的定制\r\n* [x] 支持Typescript\r\n\r\n## 示例\r\n\r\n示例源码：参考`examples`目录下面的`App.vue`文件\r\n在线示例：[Demo](http://null_639_5368.gitee.io/m-chat)\r\n\r\n## 安装\r\n\r\n```\r\nnpm install @maybecode/m-chat@next\r\n```\r\n\r\n## Props\r\n\r\n| 参数 | 类型 | 默认值 | 说明 |\r\n| ------------ | ---------------- | ------ | -------------------------------------------------------------------------------- |\r\n| messages | Array | [] | 消息数组 |\r\n| height | String | 100vh | 容器高度 |\r\n| refresh | Function | - | 刷新(加载更多)回调 |\r\n| config | Object | - | 高级配置(详情见下方config定义) |\r\n| disabledPull | Boolean | false | 禁用下拉刷新(可用于下拉数据加载完成后) |\r\n| historyId | [String, Number] | - | 历史信息最后一条id |\r\n| unReadId | [String, Number] | - | 第一条未读消息的id（默认滚动定位到第一条未读消息） |\r\n| beforeRecord | Function | - | 录音前执行函数 （可用于初始化录音相关）, 返回 true or false 决定是否执行录音逻辑 |\r\n\r\n\r\n\r\n\r\n## config \r\n\r\n默认配置 具体的参数规则在编辑器中都会有提示\r\n\r\n```js\r\n{\r\n /**\r\n * 主题\r\n */\r\n theme: 'light',\r\n /**\r\n * 图片上传配置(vant) 文件、视频...以此类推\r\n * @doc vant-uploader https://vant-contrib.gitee.io/vant/#/zh-CN/uploader#props\r\n * @warn 如果和imageUploader中的配置存在冲突那么以imageUploader为准\r\n */\r\n vanImageUploader: {},\r\n /**\r\n * 图片上传\r\n */\r\n imageUploader: {\r\n /**\r\n * 文件大小限制，单位为 kb\r\n */\r\n maxSize: 500,\r\n /**\r\n * 允许的文件类型\r\n */\r\n accept: [\"image/*\"]\r\n },\r\n /**\r\n * 文件上传\r\n */\r\n fileUploader: {\r\n maxSize: 500,\r\n accept: ['*'],\r\n },\r\n /**\r\n * 视频上传\r\n */\r\n videoUploader: {\r\n maxSize: 500,\r\n accept: ['video/*']\r\n },\r\n /**\r\n * 开放的功能\r\n */\r\n open: [\"text\", \"emoji\", \"image\",\"audio\", \"file\", \"video\"],\r\n /**\r\n * 扩展主面板功能\r\n * @demo [{\r\n type: \"location\",\r\n text: \"定位\",\r\n icon: \"location-o\" // 支持http(s)地址或者vant自带的icon\r\n }]\r\n * @description 配置此选项将额外的功能item添加到列表中\r\n */\r\n extPanelItems: [],\r\n /**\r\n * 下拉功能\r\n */\r\n pullDown: false,\r\n /**\r\n * 已读未读功能\r\n */\r\n read: false\r\n}\r\n```\r\n## msg(消息)对象\r\n\r\n```\r\n {\r\n id: null, // 唯一id\r\n name: \"\", // 姓名\r\n avatar: \"\", // 头像地址\r\n self: false, // 是否是自己\r\n type: \"text\", // 类型: text|image|audio|video|file|custom(这个type是自定义的,对应插槽名称)\r\n block: false,// 是否为单独块元素（去除头像背景等等相关元素）\r\n clearBg: false, // 去除背景但保留头像名称等特异性信息\r\n content:{\r\n text: \"\", // 文本\r\n duration: \"\", // 时长\r\n imageUrl: \"\", // 图片地址\r\n videoUrl: \"\", // 视频地址\r\n audioUrl: \"\", // 音频地址\r\n fileUrl: \"\", // 文件地址\r\n fileName: \"\", // 文件名称\r\n fileSize: \"\", // 文件大小\r\n fileExt: \"\", // 文件扩展名\r\n },\r\n time:'' // 发送时间\r\n }\r\n```\r\n\r\n## 事件\r\n\r\n| 事件名 | 说明 | 回调参数 |\r\n| -------------- | ---------------------------------------- | --------------------------------- |\r\n| submit | 文字、图片、视频、语音、文件等等发送事件 | ({ type:string, content:object }) |\r\n| recordStart | 录音开始 | |\r\n| recordStop | 录音停止 | |\r\n| recordCancel | 录音取消 | |\r\n| clickAvatar | 点击头像 | (item:object) |\r\n| clickPanelItem | 点击面板item（用于自定义panel item） | (item:object) |\r\n\r\n## Slots\r\n\r\n| 名称 | 说明 | 参数 |\r\n| ----------------------------- | -------------- | -------- |\r\n| [custom(对应msg中的type属性)] | 自定义消息类型 | { item } |\r\n| panel | 自定义扩展面板 | - |\r\n\r\n## 方法\r\n\r\n通过 ref 可以获取到 m-chat 实例并调用实例方法\r\n\r\n| 方法名 | 说明 | 参数 | 返回值 |\r\n| ----------- | ----------------- | -------------- | ------ |\r\n| switchPanel | 扩展面板显示/隐藏 | (flag:boolean) | - |\r\n\r\n## 使用须知\r\n\r\n### 录音\r\n从3.0版本开始组件主体不再内置H5录音相关具体实现,如果有需求利用`recordStart`,`recordCancel`,`recordStop`相关回调和 [Recorder](https://github.com/xiangyuecn/Recorder) 录音库进行开发。\r\n对于微信公众号环境可以调用`JSSDK`中内置的录音方法配合回调来进行开发。\r\n","readmeFilename":"README.md","_id":"@maybecode/m-chat@3.0.12","_nodeVersion":"14.21.3","_npmVersion":"6.14.18","dist":{"integrity":"sha512-uZYZ28wSOtlXeN6fe8GYhjv/TGKOpsZl8/ZNmNDvjYH+s95ex3+RcGJCBlzxOK5pIAKypSZcozS/s2pNcp/8hA==","shasum":"7cfcd357e250485b94740a876bba5f653f431af0","tarball":"https://registry.npmjs.org/@maybecode/m-chat/-/m-chat-3.0.12.tgz","fileCount":22,"unpackedSize":4199040,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEMBdal6sJEhSc7LSMfZuKbidXS3QjeYxPq/nqTVBhJjAiEAiz3KwIaFypABCmqhNTAN3m7gpoX8bgGpTlBjWDHSWbI="}]},"_npmUser":{"name":"qq1013480204","email":"1013480204@qq.com"},"directories":{},"maintainers":[{"name":"qq1013480204","email":"1013480204@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/m-chat_3.0.12_1703821375116_0.7506394246543167"},"_hasShrinkwrap":false},"3.0.13":{"name":"@maybecode/m-chat","version":"3.0.13","description":"Mobile IM Component","type":"module","style":"./dist/style.css","types":"./dist/index.d.ts","main":"./dist/m-chat.umd.cjs","module":"./dist/m-chat.js","exports":{".":{"import":"./dist/m-chat.js","require":"./dist/m-chat.umd.cjs"},"./dist/style.css":{"import":"./dist/style.css","require":"./dist/style.css"}},"scripts":{"dev":"vue-tsc --noEmit && vite build --mode dev --config ./build/vite.config.ts --watch","build":"vue-tsc --noEmit && vite build --config ./build/vite.config.ts","test":"echo \"Error: no test specified\" && exit 1"},"devDependencies":{"@amap/amap-jsapi-loader":"^1.0.1","@better-scroll/core":"^2.5.1","@better-scroll/pull-down":"^2.5.1","@jtsang/vite-plugin-style-import":"^2.0.0","@rollup/plugin-terser":"^0.4.4","@types/node":"^18.7.21","@vitejs/plugin-vue":"^3.1.0","@vueuse/core":"^10.1.2","any-touch":"^2.2.0","lodash":"^4.17.21","lottie-web":"^5.9.6","mitt":"^3.0.0","postcss-px-to-viewport-8-plugin":"^1.1.5","sass":"^1.55.0","vant":"^3.6.3","vite":"^3.1.0","vite-plugin-dts":"^2.3.0","vite-plugin-libcss":"^1.0.5","vite-plugin-svgicon":"^1.3.1","vite-plugin-theme":"^0.8.6","vite-plugin-vue-setup-extend":"^0.4.0","vite-svg-loader":"^4.0.0","vue":"^3.2.37","vue-tsc":"^0.40.13"},"author":{"name":"maybe"},"license":"MIT","homepage":"https://gitee.com/null_639_5368/m-chat/v3","readme":"# m-chat\r\n基于vue3的拆箱即用的IM组件
\r\n\r\n[](https://www.npmjs.com/package/@maybecode/m-chat)\r\n\r\n\r\n\r\n\r\n## 功能\r\n\r\n* [x] 文字展示（支持html标签渲染）\r\n* [x] 图片展示和预览\r\n* [x] 视频播放\r\n* [x] 语音播放\r\n* [x] 自定义默认头像\r\n* [x] 下拉加载更多\r\n* [x] 图片/视频/语音发送功能\r\n* [x] 提供自定义类型插槽（custom）进行业务的定制\r\n* [x] 支持Typescript\r\n\r\n## 示例\r\n\r\n示例源码：参考`examples`目录下面的`App.vue`文件\r\n在线示例：[Demo](http://null_639_5368.gitee.io/m-chat)\r\n\r\n## 安装\r\n\r\n```\r\nnpm install @maybecode/m-chat@next\r\n```\r\n\r\n## Props\r\n\r\n| 参数 | 类型 | 默认值 | 说明 |\r\n| ------------ | ---------------- | ------ | -------------------------------------------------------------------------------- |\r\n| messages | Array | [] | 消息数组 |\r\n| height | String | 100vh | 容器高度 |\r\n| refresh | Function | - | 刷新(加载更多)回调 |\r\n| config | Object | - | 高级配置(详情见下方config定义) |\r\n| disabledPull | Boolean | false | 禁用下拉刷新(可用于下拉数据加载完成后) |\r\n| historyId | [String, Number] | - | 历史信息最后一条id |\r\n| unReadId | [String, Number] | - | 第一条未读消息的id（默认滚动定位到第一条未读消息） |\r\n| beforeRecord | Function | - | 录音前执行函数 （可用于初始化录音相关）, 返回 true or false 决定是否执行录音逻辑 |\r\n\r\n\r\n\r\n\r\n## config \r\n\r\n默认配置 具体的参数规则在编辑器中都会有提示\r\n\r\n```js\r\n{\r\n /**\r\n * 主题\r\n */\r\n theme: 'light',\r\n /**\r\n * 图片上传配置(vant) 文件、视频...以此类推\r\n * @doc vant-uploader https://vant-contrib.gitee.io/vant/#/zh-CN/uploader#props\r\n * @warn 如果和imageUploader中的配置存在冲突那么以imageUploader为准\r\n */\r\n vanImageUploader: {},\r\n /**\r\n * 图片上传\r\n */\r\n imageUploader: {\r\n /**\r\n * 文件大小限制，单位为 kb\r\n */\r\n maxSize: 500,\r\n /**\r\n * 允许的文件类型\r\n */\r\n accept: [\"image/*\"]\r\n },\r\n /**\r\n * 文件上传\r\n */\r\n fileUploader: {\r\n maxSize: 500,\r\n accept: ['*'],\r\n },\r\n /**\r\n * 视频上传\r\n */\r\n videoUploader: {\r\n maxSize: 500,\r\n accept: ['video/*']\r\n },\r\n /**\r\n * 开放的功能\r\n */\r\n open: [\"text\", \"emoji\", \"image\",\"audio\", \"file\", \"video\"],\r\n /**\r\n * 扩展主面板功能\r\n * @demo [{\r\n type: \"location\",\r\n text: \"定位\",\r\n icon: \"location-o\" // 支持http(s)地址或者vant自带的icon\r\n }]\r\n * @description 配置此选项将额外的功能item添加到列表中\r\n */\r\n extPanelItems: [],\r\n /**\r\n * 下拉功能\r\n */\r\n pullDown: false,\r\n /**\r\n * 已读未读功能\r\n */\r\n read: false\r\n}\r\n```\r\n## msg(消息)对象\r\n\r\n```\r\n {\r\n id: null, // 唯一id\r\n name: \"\", // 姓名\r\n avatar: \"\", // 头像地址\r\n self: false, // 是否是自己\r\n type: \"text\", // 类型: text|image|audio|video|file|custom(这个type是自定义的,对应插槽名称)\r\n block: false,// 是否为单独块元素（去除头像背景等等相关元素）\r\n clearBg: false, // 去除背景但保留头像名称等特异性信息\r\n content:{\r\n text: \"\", // 文本\r\n duration: \"\", // 时长\r\n imageUrl: \"\", // 图片地址\r\n videoUrl: \"\", // 视频地址\r\n audioUrl: \"\", // 音频地址\r\n fileUrl: \"\", // 文件地址\r\n fileName: \"\", // 文件名称\r\n fileSize: \"\", // 文件大小\r\n fileExt: \"\", // 文件扩展名\r\n },\r\n time:'' // 发送时间\r\n }\r\n```\r\n\r\n## 事件\r\n\r\n| 事件名 | 说明 | 回调参数 |\r\n| -------------- | ---------------------------------------- | --------------------------------- |\r\n| submit | 文字、图片、视频、语音、文件等等发送事件 | ({ type:string, content:object }) |\r\n| recordStart | 录音开始 | |\r\n| recordStop | 录音停止 | |\r\n| recordCancel | 录音取消 | |\r\n| clickAvatar | 点击头像 | (item:object) |\r\n| clickPanelItem | 点击面板item（用于自定义panel item） | (item:object) |\r\n\r\n## Slots\r\n\r\n| 名称 | 说明 | 参数 |\r\n| ----------------------------- | -------------- | -------- |\r\n| [custom(对应msg中的type属性)] | 自定义消息类型 | { item } |\r\n| panel | 自定义扩展面板 | - |\r\n\r\n## 方法\r\n\r\n通过 ref 可以获取到 m-chat 实例并调用实例方法\r\n\r\n| 方法名 | 说明 | 参数 | 返回值 |\r\n| ----------- | ----------------- | -------------- | ------ |\r\n| switchPanel | 扩展面板显示/隐藏 | (flag:boolean) | - |\r\n\r\n## 使用须知\r\n\r\n### 录音\r\n从3.0版本开始组件主体不再内置H5录音相关具体实现,如果有需求利用`recordStart`,`recordCancel`,`recordStop`相关回调和 [Recorder](https://github.com/xiangyuecn/Recorder) 录音库进行开发。\r\n对于微信公众号环境可以调用`JSSDK`中内置的录音方法配合回调来进行开发。\r\n","readmeFilename":"README.md","_id":"@maybecode/m-chat@3.0.13","_nodeVersion":"14.21.3","_npmVersion":"6.14.18","dist":{"integrity":"sha512-C7zV8I/8wJFgwMDABhf7RgU/0rXHTqCONxuXpbTzO1E1JkAxib92uq2VfTd1FQGUni0JlcEjehATmxrOB/OzRw==","shasum":"df0dab94254b25f623f51bb8af22d0f89295bbcf","tarball":"https://registry.npmjs.org/@maybecode/m-chat/-/m-chat-3.0.13.tgz","fileCount":20,"unpackedSize":4193618,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICRa0jQv/8ZE7G9clbGwDYu8B1zftpbQ3WG77KVtKWt7AiAjzN/Rf3lHffJQOu8Fdu0AI+k5oRmUwD0e7zBqEPx8OQ=="}]},"_npmUser":{"name":"qq1013480204","email":"1013480204@qq.com"},"directories":{},"maintainers":[{"name":"qq1013480204","email":"1013480204@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/m-chat_3.0.13_1703830443572_0.80135835727927"},"_hasShrinkwrap":false},"3.0.14":{"name":"@maybecode/m-chat","version":"3.0.14","description":"Mobile IM Component","type":"module","style":"./dist/style.css","types":"./dist/index.d.ts","main":"./dist/m-chat.umd.cjs","module":"./dist/m-chat.js","exports":{".":{"import":"./dist/m-chat.js","require":"./dist/m-chat.umd.cjs"},"./dist/style.css":{"import":"./dist/style.css","require":"./dist/style.css"}},"scripts":{"dev":"vue-tsc --noEmit && vite build --mode dev --config ./build/vite.config.ts --watch","build":"vue-tsc --noEmit && vite build --config ./build/vite.config.ts","test":"echo \"Error: no test specified\" && exit 1"},"devDependencies":{"@amap/amap-jsapi-loader":"^1.0.1","@better-scroll/core":"^2.5.1","@better-scroll/pull-down":"^2.5.1","@jtsang/vite-plugin-style-import":"^2.0.0","@rollup/plugin-terser":"^0.4.4","@types/node":"^18.7.21","@vitejs/plugin-vue":"^3.1.0","@vueuse/core":"^10.1.2","any-touch":"^2.2.0","lodash":"^4.17.21","lottie-web":"^5.9.6","mitt":"^3.0.0","postcss-px-to-viewport-8-plugin":"^1.1.5","sass":"^1.55.0","vant":"^3.6.3","vite":"^3.1.0","vite-plugin-dts":"^2.3.0","vite-plugin-libcss":"^1.0.5","vite-plugin-svgicon":"^1.3.1","vite-plugin-theme":"^0.8.6","vite-plugin-vue-setup-extend":"^0.4.0","vite-svg-loader":"^4.0.0","vue":"^3.2.37","vue-tsc":"^0.40.13"},"author":{"name":"maybe"},"license":"MIT","homepage":"https://gitee.com/null_639_5368/m-chat/v3","readme":"# m-chat\r\n基于vue3的拆箱即用的IM组件
\r\n\r\n[](https://www.npmjs.com/package/@maybecode/m-chat)\r\n\r\n\r\n\r\n\r\n## 功能\r\n\r\n* [x] 文字展示（支持html标签渲染）\r\n* [x] 图片展示和预览\r\n* [x] 视频播放\r\n* [x] 语音播放\r\n* [x] 自定义默认头像\r\n* [x] 下拉加载更多\r\n* [x] 图片/视频/语音发送功能\r\n* [x] 提供自定义类型插槽（custom）进行业务的定制\r\n* [x] 支持Typescript\r\n\r\n## 示例\r\n\r\n示例源码：参考`examples`目录下面的`App.vue`文件\r\n在线示例：[Demo](http://null_639_5368.gitee.io/m-chat)\r\n\r\n## 安装\r\n\r\n```\r\nnpm install @maybecode/m-chat@next\r\n```\r\n\r\n## Props\r\n\r\n| 参数 | 类型 | 默认值 | 说明 |\r\n| ------------ | ---------------- | ------ | -------------------------------------------------------------------------------- |\r\n| messages | Array | [] | 消息数组 |\r\n| height | String | 100vh | 容器高度 |\r\n| refresh | Function | - | 刷新(加载更多)回调 |\r\n| config | Object | - | 高级配置(详情见下方config定义) |\r\n| disabledPull | Boolean | false | 禁用下拉刷新(可用于下拉数据加载完成后) |\r\n| historyId | [String, Number] | - | 历史信息最后一条id |\r\n| unReadId | [String, Number] | - | 第一条未读消息的id（默认滚动定位到第一条未读消息） |\r\n| beforeRecord | Function | - | 录音前执行函数 （可用于初始化录音相关）, 返回 true or false 决定是否执行录音逻辑 |\r\n\r\n\r\n\r\n\r\n## config \r\n\r\n默认配置 具体的参数规则在编辑器中都会有提示\r\n\r\n```js\r\n{\r\n /**\r\n * 主题\r\n */\r\n theme: 'light',\r\n /**\r\n * 图片上传配置(vant) 文件、视频...以此类推\r\n * @doc vant-uploader https://vant-contrib.gitee.io/vant/#/zh-CN/uploader#props\r\n * @warn 如果和imageUploader中的配置存在冲突那么以imageUploader为准\r\n */\r\n vanImageUploader: {},\r\n /**\r\n * 图片上传\r\n */\r\n imageUploader: {\r\n /**\r\n * 文件大小限制，单位为 kb\r\n */\r\n maxSize: 500,\r\n /**\r\n * 允许的文件类型\r\n */\r\n accept: [\"image/*\"]\r\n },\r\n /**\r\n * 文件上传\r\n */\r\n fileUploader: {\r\n maxSize: 500,\r\n accept: ['*'],\r\n },\r\n /**\r\n * 视频上传\r\n */\r\n videoUploader: {\r\n maxSize: 500,\r\n accept: ['video/*']\r\n },\r\n /**\r\n * 开放的功能\r\n */\r\n open: [\"text\", \"emoji\", \"image\",\"audio\", \"file\", \"video\"],\r\n /**\r\n * 扩展主面板功能\r\n * @demo [{\r\n type: \"location\",\r\n text: \"定位\",\r\n icon: \"location-o\" // 支持http(s)地址或者vant自带的icon\r\n }]\r\n * @description 配置此选项将额外的功能item添加到列表中\r\n */\r\n extPanelItems: [],\r\n /**\r\n * 下拉功能\r\n */\r\n pullDown: false,\r\n /**\r\n * 已读未读功能\r\n */\r\n read: false\r\n}\r\n```\r\n## msg(消息)对象\r\n\r\n```\r\n {\r\n id: null, // 唯一id\r\n name: \"\", // 姓名\r\n avatar: \"\", // 头像地址\r\n self: false, // 是否是自己\r\n type: \"text\", // 类型: text|image|audio|video|file|custom(这个type是自定义的,对应插槽名称)\r\n block: false,// 是否为单独块元素（去除头像背景等等相关元素）\r\n clearBg: false, // 去除背景但保留头像名称等特异性信息\r\n content:{\r\n text: \"\", // 文本\r\n duration: \"\", // 时长\r\n imageUrl: \"\", // 图片地址\r\n videoUrl: \"\", // 视频地址\r\n audioUrl: \"\", // 音频地址\r\n fileUrl: \"\", // 文件地址\r\n fileName: \"\", // 文件名称\r\n fileSize: \"\", // 文件大小\r\n fileExt: \"\", // 文件扩展名\r\n },\r\n time:'' // 发送时间\r\n }\r\n```\r\n\r\n## 事件\r\n\r\n| 事件名 | 说明 | 回调参数 |\r\n| -------------- | ---------------------------------------- | --------------------------------- |\r\n| submit | 文字、图片、视频、语音、文件等等发送事件 | ({ type:string, content:object }) |\r\n| recordStart | 录音开始 | |\r\n| recordStop | 录音停止 | |\r\n| recordCancel | 录音取消 | |\r\n| clickAvatar | 点击头像 | (item:object) |\r\n| clickPanelItem | 点击面板item（用于自定义panel item） | (item:object) |\r\n\r\n## Slots\r\n\r\n| 名称 | 说明 | 参数 |\r\n| ----------------------------- | -------------- | -------- |\r\n| [custom(对应msg中的type属性)] | 自定义消息类型 | { item } |\r\n| panel | 自定义扩展面板 | - |\r\n\r\n## 方法\r\n\r\n通过 ref 可以获取到 m-chat 实例并调用实例方法\r\n\r\n| 方法名 | 说明 | 参数 | 返回值 |\r\n| ----------- | ----------------- | -------------- | ------ |\r\n| switchPanel | 扩展面板显示/隐藏 | (flag:boolean) | - |\r\n\r\n## 使用须知\r\n\r\n### 录音\r\n从3.0版本开始组件主体不再内置H5录音相关具体实现,如果有需求利用`recordStart`,`recordCancel`,`recordStop`相关回调和 [Recorder](https://github.com/xiangyuecn/Recorder) 录音库进行开发。\r\n对于微信公众号环境可以调用`JSSDK`中内置的录音方法配合回调来进行开发。\r\n","readmeFilename":"README.md","_id":"@maybecode/m-chat@3.0.14","_nodeVersion":"14.21.3","_npmVersion":"6.14.18","dist":{"integrity":"sha512-n6HVi0b6FxhMDf1cMC2o9q6/j0McxBs3BipsYbKSkJAMPrh5dL+QzbqL1p+VUSZWvJ6BK+U74UYkO1FTYdQExQ==","shasum":"13b14c4e04bd46fe61b9b05bfdb5d8ee330406cf","tarball":"https://registry.npmjs.org/@maybecode/m-chat/-/m-chat-3.0.14.tgz","fileCount":20,"unpackedSize":4205933,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCMOTQ89KMDoCvqsuJ9x3cooNfqdFBO1LpsrjrP+WFb6QIhAO4lPu4ClK/0OTr/1XvcXehH4rl6CUwiIazIZ3bVwBu6"}]},"_npmUser":{"name":"qq1013480204","email":"1013480204@qq.com"},"directories":{},"maintainers":[{"name":"qq1013480204","email":"1013480204@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/m-chat_3.0.14_1704440607633_0.9565416848768689"},"_hasShrinkwrap":false},"3.0.15":{"name":"@maybecode/m-chat","version":"3.0.15","description":"Mobile IM Component","type":"module","style":"./dist/style.css","types":"./dist/index.d.ts","main":"./dist/m-chat.umd.cjs","module":"./dist/m-chat.js","exports":{".":{"import":"./dist/m-chat.js","require":"./dist/m-chat.umd.cjs"},"./dist/style.css":{"import":"./dist/style.css","require":"./dist/style.css"}},"scripts":{"dev":"vue-tsc --noEmit && vite build --mode dev --config ./build/vite.config.ts --watch","build":"vue-tsc --noEmit && vite build --config ./build/vite.config.ts","test":"echo \"Error: no test specified\" && exit 1"},"devDependencies":{"@amap/amap-jsapi-loader":"^1.0.1","@better-scroll/core":"^2.5.1","@better-scroll/pull-down":"^2.5.1","@jtsang/vite-plugin-style-import":"^2.0.0","@rollup/plugin-terser":"^0.4.4","@types/node":"^18.7.21","@vitejs/plugin-vue":"^3.1.0","@vueuse/core":"^10.1.2","any-touch":"^2.2.0","lodash":"^4.17.21","lottie-web":"^5.9.6","mitt":"^3.0.0","postcss-px-to-viewport-8-plugin":"^1.1.5","sass":"^1.55.0","vant":"^3.6.3","vite":"^3.1.0","vite-plugin-dts":"^2.3.0","vite-plugin-libcss":"^1.0.5","vite-plugin-svgicon":"^1.3.1","vite-plugin-theme":"^0.8.6","vite-plugin-vue-setup-extend":"^0.4.0","vite-svg-loader":"^4.0.0","vue":"^3.2.37","vue-tsc":"^0.40.13"},"author":{"name":"maybe"},"license":"MIT","homepage":"https://gitee.com/null_639_5368/m-chat/v3","readme":"# m-chat\r\n基于vue3的拆箱即用的IM组件
\r\n\r\n[](https://www.npmjs.com/package/@maybecode/m-chat)\r\n\r\n\r\n\r\n\r\n## 功能\r\n\r\n* [x] 文字展示（支持html标签渲染）\r\n* [x] 图片展示和预览\r\n* [x] 视频播放\r\n* [x] 语音播放\r\n* [x] 自定义默认头像\r\n* [x] 下拉加载更多\r\n* [x] 图片/视频/语音发送功能\r\n* [x] 提供自定义类型插槽（custom）进行业务的定制\r\n* [x] 支持Typescript\r\n\r\n## 示例\r\n\r\n示例源码：参考`examples`目录下面的`App.vue`文件\r\n在线示例：[Demo](http://null_639_5368.gitee.io/m-chat)\r\n\r\n## 安装\r\n\r\n```\r\nnpm install @maybecode/m-chat@next\r\n```\r\n\r\n## Props\r\n\r\n| 参数 | 类型 | 默认值 | 说明 |\r\n| ------------ | ---------------- | ------ | -------------------------------------------------------------------------------- |\r\n| messages | Array | [] | 消息数组 |\r\n| height | String | 100vh | 容器高度 |\r\n| refresh | Function | - | 刷新(加载更多)回调 |\r\n| config | Object | - | 高级配置(详情见下方config定义) |\r\n| disabledPull | Boolean | false | 禁用下拉刷新(可用于下拉数据加载完成后) |\r\n| historyId | [String, Number] | - | 历史信息最后一条id |\r\n| unReadId | [String, Number] | - | 第一条未读消息的id（默认滚动定位到第一条未读消息） |\r\n| beforeRecord | Function | - | 录音前执行函数 （可用于初始化录音相关）, 返回 true or false 决定是否执行录音逻辑 |\r\n\r\n\r\n\r\n\r\n## config \r\n\r\n默认配置 具体的参数规则在编辑器中都会有提示\r\n\r\n```js\r\n{\r\n /**\r\n * 主题\r\n */\r\n theme: 'light',\r\n /**\r\n * 图片上传配置(vant) 文件、视频...以此类推\r\n * @doc vant-uploader https://vant-contrib.gitee.io/vant/#/zh-CN/uploader#props\r\n * @warn 如果和imageUploader中的配置存在冲突那么以imageUploader为准\r\n */\r\n vanImageUploader: {},\r\n /**\r\n * 图片上传\r\n */\r\n imageUploader: {\r\n /**\r\n * 文件大小限制，单位为 kb\r\n */\r\n maxSize: 500,\r\n /**\r\n * 允许的文件类型\r\n */\r\n accept: [\"image/*\"]\r\n },\r\n /**\r\n * 文件上传\r\n */\r\n fileUploader: {\r\n maxSize: 500,\r\n accept: ['*'],\r\n },\r\n /**\r\n * 视频上传\r\n */\r\n videoUploader: {\r\n maxSize: 500,\r\n accept: ['video/*']\r\n },\r\n /**\r\n * 开放的功能\r\n */\r\n open: [\"text\", \"emoji\", \"image\",\"audio\", \"file\", \"video\"],\r\n /**\r\n * 扩展主面板功能\r\n * @demo [{\r\n type: \"location\",\r\n text: \"定位\",\r\n icon: \"location-o\" // 支持http(s)地址或者vant自带的icon\r\n }]\r\n * @description 配置此选项将额外的功能item添加到列表中\r\n */\r\n extPanelItems: [],\r\n /**\r\n * 下拉功能\r\n */\r\n pullDown: false,\r\n /**\r\n * 已读未读功能\r\n */\r\n read: false\r\n}\r\n```\r\n## msg(消息)对象\r\n\r\n```\r\n {\r\n id: null, // 唯一id\r\n name: \"\", // 姓名\r\n avatar: \"\", // 头像地址\r\n self: false, // 是否是自己\r\n type: \"text\", // 类型: text|image|audio|video|file|custom(这个type是自定义的,对应插槽名称)\r\n block: false,// 是否为单独块元素（去除头像背景等等相关元素）\r\n clearBg: false, // 去除背景但保留头像名称等特异性信息\r\n content:{\r\n text: \"\", // 文本\r\n duration: \"\", // 时长\r\n imageUrl: \"\", // 图片地址\r\n videoUrl: \"\", // 视频地址\r\n audioUrl: \"\", // 音频地址\r\n fileUrl: \"\", // 文件地址\r\n fileName: \"\", // 文件名称\r\n fileSize: \"\", // 文件大小\r\n fileExt: \"\", // 文件扩展名\r\n },\r\n time:'' // 发送时间\r\n }\r\n```\r\n\r\n## 事件\r\n\r\n| 事件名 | 说明 | 回调参数 |\r\n| -------------- | ---------------------------------------- | --------------------------------- |\r\n| submit | 文字、图片、视频、语音、文件等等发送事件 | ({ type:string, content:object }) |\r\n| recordStart | 录音开始 | |\r\n| recordStop | 录音停止 | |\r\n| recordCancel | 录音取消 | |\r\n| clickAvatar | 点击头像 | (item:object) |\r\n| clickPanelItem | 点击面板item（用于自定义panel item） | (item:object) |\r\n\r\n## Slots\r\n\r\n| 名称 | 说明 | 参数 |\r\n| ----------------------------- | -------------- | -------- |\r\n| [custom(对应msg中的type属性)] | 自定义消息类型 | { item } |\r\n| panel | 自定义扩展面板 | - |\r\n\r\n## 方法\r\n\r\n通过 ref 可以获取到 m-chat 实例并调用实例方法\r\n\r\n| 方法名 | 说明 | 参数 | 返回值 |\r\n| ----------- | ----------------- | -------------- | ------ |\r\n| switchPanel | 扩展面板显示/隐藏 | (flag:boolean) | - |\r\n\r\n## 使用须知\r\n\r\n### 录音\r\n从3.0版本开始组件主体不再内置H5录音相关具体实现,如果有需求利用`recordStart`,`recordCancel`,`recordStop`相关回调和 [Recorder](https://github.com/xiangyuecn/Recorder) 录音库进行开发。\r\n对于微信公众号环境可以调用`JSSDK`中内置的录音方法配合回调来进行开发。\r\n","readmeFilename":"README.md","_id":"@maybecode/m-chat@3.0.15","_nodeVersion":"14.21.3","_npmVersion":"6.14.18","dist":{"integrity":"sha512-1AefUjq8uR/6Pt1W3mWcpjl+z8Q0Dy8zJnJVf56jXQViITmDgwSoysCCzae2cWKqeF/Ptk/KrbfWD4YY/I+EUQ==","shasum":"005a62be652eb58a4f98dce3ce9e1755bb0616b8","tarball":"https://registry.npmjs.org/@maybecode/m-chat/-/m-chat-3.0.15.tgz","fileCount":20,"unpackedSize":4206471,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCdxNr9cnGT7kAB6E2Wg9YAg4X/nFiwkHM6ZFfvxDL0lAIhALsxzpCdKQY4z++jumltk94PoEXVWFx/91i2DBTuviLn"}]},"_npmUser":{"name":"qq1013480204","email":"1013480204@qq.com"},"directories":{},"maintainers":[{"name":"qq1013480204","email":"1013480204@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/m-chat_3.0.15_1704699849540_0.22085162962616733"},"_hasShrinkwrap":false},"3.0.16":{"name":"@maybecode/m-chat","version":"3.0.16","description":"Mobile IM Component","type":"module","style":"./dist/style.css","types":"./dist/index.d.ts","main":"./dist/m-chat.umd.cjs","module":"./dist/m-chat.js","exports":{".":{"import":"./dist/m-chat.js","require":"./dist/m-chat.umd.cjs"},"./dist/style.css":{"import":"./dist/style.css","require":"./dist/style.css"}},"scripts":{"dev":"vue-tsc --noEmit && vite build --mode dev --config ./build/vite.config.ts --watch","build":"vue-tsc --noEmit && vite build --config ./build/vite.config.ts","test":"echo \"Error: no test specified\" && exit 1"},"devDependencies":{"@amap/amap-jsapi-loader":"^1.0.1","@better-scroll/core":"^2.5.1","@better-scroll/pull-down":"^2.5.1","@jtsang/vite-plugin-style-import":"^2.0.0","@rollup/plugin-terser":"^0.4.4","@types/node":"^18.7.21","@vitejs/plugin-vue":"^3.1.0","@vueuse/core":"^10.1.2","any-touch":"^2.2.0","lodash":"^4.17.21","lottie-web":"^5.9.6","mitt":"^3.0.0","postcss-px-to-viewport-8-plugin":"^1.1.5","sass":"^1.55.0","vant":"^3.6.3","vite":"^3.1.0","vite-plugin-dts":"^2.3.0","vite-plugin-libcss":"^1.0.5","vite-plugin-svgicon":"^1.3.1","vite-plugin-theme":"^0.8.6","vite-plugin-vue-setup-extend":"^0.4.0","vite-svg-loader":"^4.0.0","vue":"^3.2.37","vue-tsc":"^0.40.13"},"author":{"name":"maybe"},"license":"MIT","homepage":"https://gitee.com/null_639_5368/m-chat/v3","readme":"# m-chat\r\n基于vue3的拆箱即用的IM组件
\r\n\r\n[](https://www.npmjs.com/package/@maybecode/m-chat)\r\n\r\n[](https://www.npmjs.com/package/@maybecode/m-chat)\r\n\r\n\r\n\r\n\r\n## 功能\r\n\r\n* [x] 文字展示（支持html标签渲染）\r\n* [x] 图片展示和预览\r\n* [x] 视频播放\r\n* [x] 语音播放\r\n* [x] 自定义默认头像\r\n* [x] 下拉加载更多\r\n* [x] 图片/视频/语音发送功能\r\n* [x] 提供自定义类型插槽（custom）进行业务的定制\r\n* [x] 支持Typescript\r\n\r\n## 示例\r\n\r\n示例源码：参考`examples`目录下面的`App.vue`文件\r\n在线示例：[Demo](http://null_639_5368.gitee.io/m-chat)\r\n\r\n## 安装\r\n\r\n```\r\nnpm install @maybecode/m-chat@next\r\n```\r\n\r\n## Props\r\n\r\n| 参数 | 类型 | 默认值 | 说明 |\r\n| ------------ | ---------------- | ------ | -------------------------------------------------------------------------------- |\r\n| messages | Array | [] | 消息数组 |\r\n| height | String | 100vh | 容器高度 |\r\n| refresh | Function | - | 刷新(加载更多)回调 |\r\n| config | Object | - | 高级配置(详情见下方config定义) |\r\n| disabledPull | Boolean | false | 禁用下拉刷新(可用于下拉数据加载完成后) |\r\n| historyId | [String, Number] | - | 历史信息最后一条id |\r\n| unReadId | [String, Number] | - | 第一条未读消息的id（默认滚动定位到第一条未读消息） |\r\n| beforeRecord | Function | - | 录音前执行函数 （可用于初始化录音相关）, 返回 true or false 决定是否执行录音逻辑 |\r\n\r\n\r\n\r\n\r\n## config \r\n\r\n默认配置 具体的参数规则在编辑器中都会有提示\r\n\r\n```js\r\n{\r\n /**\r\n * 主题\r\n */\r\n theme: 'light',\r\n /**\r\n * 图片上传配置(vant) 文件、视频...以此类推\r\n * @doc vant-uploader https://vant-contrib.gitee.io/vant/#/zh-CN/uploader#props\r\n * @warn 如果和imageUploader中的配置存在冲突那么以imageUploader为准\r\n */\r\n vanImageUploader: {},\r\n /**\r\n * 图片上传\r\n */\r\n imageUploader: {\r\n /**\r\n * 文件大小限制，单位为 kb\r\n */\r\n maxSize: 500,\r\n /**\r\n * 允许的文件类型\r\n */\r\n accept: [\"image/*\"]\r\n },\r\n /**\r\n * 文件上传\r\n */\r\n fileUploader: {\r\n maxSize: 500,\r\n accept: ['*'],\r\n },\r\n /**\r\n * 视频上传\r\n */\r\n videoUploader: {\r\n maxSize: 500,\r\n accept: ['video/*']\r\n },\r\n /**\r\n * 开放的功能\r\n */\r\n open: [\"text\", \"emoji\", \"image\",\"audio\", \"file\", \"video\"],\r\n /**\r\n * 扩展主面板功能\r\n * @demo [{\r\n type: \"location\",\r\n text: \"定位\",\r\n icon: \"location-o\" // 支持http(s)地址或者vant自带的icon\r\n }]\r\n * @description 配置此选项将额外的功能item添加到列表中\r\n */\r\n extPanelItems: [],\r\n /**\r\n * 下拉功能\r\n */\r\n pullDown: false,\r\n /**\r\n * 已读未读功能\r\n */\r\n read: false\r\n}\r\n```\r\n## msg(消息)对象\r\n\r\n```\r\n {\r\n id: null, // 唯一id\r\n name: \"\", // 姓名\r\n avatar: \"\", // 头像地址\r\n self: false, // 是否是自己\r\n type: \"text\", // 类型: text|image|audio|video|file|custom(这个type是自定义的,对应插槽名称)\r\n block: false,// 是否为单独块元素（去除头像背景等等相关元素）\r\n clearBg: false, // 去除背景但保留头像名称等特异性信息\r\n content:{\r\n text: \"\", // 文本\r\n duration: \"\", // 时长\r\n imageUrl: \"\", // 图片地址\r\n videoUrl: \"\", // 视频地址\r\n audioUrl: \"\", // 音频地址\r\n fileUrl: \"\", // 文件地址\r\n fileName: \"\", // 文件名称\r\n fileSize: \"\", // 文件大小\r\n fileExt: \"\", // 文件扩展名\r\n },\r\n time:'' // 发送时间\r\n }\r\n```\r\n\r\n## 事件\r\n\r\n| 事件名 | 说明 | 回调参数 |\r\n| -------------- | ---------------------------------------- | --------------------------------- |\r\n| submit | 文字、图片、视频、语音、文件等等发送事件 | ({ type:string, content:object }) |\r\n| recordStart | 录音开始 | |\r\n| recordStop | 录音停止 | |\r\n| recordCancel | 录音取消 | |\r\n| clickAvatar | 点击头像 | (item:object) |\r\n| clickPanelItem | 点击面板item（用于自定义panel item） | (item:object) |\r\n\r\n## Slots\r\n\r\n| 名称 | 说明 | 参数 |\r\n| ----------------------------- | ---------------- | -------- |\r\n| [custom(对应msg中的type属性)] | 自定义消息类型 | { item } |\r\n| panel | 自定义扩展面板 | - |\r\n| commentNav | 回复框上方导航栏 | - |\r\n\r\n## 方法\r\n\r\n通过 ref 可以获取到 m-chat 实例并调用实例方法\r\n\r\n| 方法名 | 说明 | 参数 | 返回值 |\r\n| ----------- | ----------------- | -------------- | ------ |\r\n| switchPanel | 扩展面板显示/隐藏 | (flag:boolean) | - |\r\n\r\n## 使用须知\r\n\r\n### 录音\r\n从3.0版本开始组件主体不再内置H5录音相关具体实现,如果有需求利用`recordStart`,`recordCancel`,`recordStop`相关回调和 [Recorder](https://github.com/xiangyuecn/Recorder) 录音库进行开发。\r\n对于微信公众号环境可以调用`JSSDK`中内置的录音方法配合回调来进行开发。\r\n","readmeFilename":"README.md","_id":"@maybecode/m-chat@3.0.16","_nodeVersion":"14.21.3","_npmVersion":"6.14.18","dist":{"integrity":"sha512-SnAExgx6I8PtRbJU29OIEsugKCgxaZ6odOfzlwpnTvqwXj4HxWt+lHG6bd4Hi8wYYED15nCFdWKn1jw7q87FwQ==","shasum":"1eb0eca0daeaa014ee87534f4a8aaeb16a679ce5","tarball":"https://registry.npmjs.org/@maybecode/m-chat/-/m-chat-3.0.16.tgz","fileCount":20,"unpackedSize":4207225,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICRPRSK/EtXkNZ+PaAWZwY1j7ozHN+nODOqMrgXeJWPfAiEA4xGXo8N3sFO1TB2IlC8dGXsgh+0V2K6Qc/8/77zV9GQ="}]},"_npmUser":{"name":"qq1013480204","email":"1013480204@qq.com"},"directories":{},"maintainers":[{"name":"qq1013480204","email":"1013480204@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/m-chat_3.0.16_1704701407490_0.782220430971466"},"_hasShrinkwrap":false},"3.0.17":{"name":"@maybecode/m-chat","version":"3.0.17","description":"Mobile IM Component","type":"module","style":"./dist/style.css","types":"./dist/index.d.ts","main":"./dist/m-chat.umd.cjs","module":"./dist/m-chat.js","exports":{".":{"import":"./dist/m-chat.js","require":"./dist/m-chat.umd.cjs"},"./dist/style.css":{"import":"./dist/style.css","require":"./dist/style.css"}},"scripts":{"dev":"vue-tsc --noEmit && vite build --mode dev --config ./build/vite.config.ts --watch","build":"vue-tsc --noEmit && vite build --config ./build/vite.config.ts","test":"echo \"Error: no test specified\" && exit 1"},"devDependencies":{"@amap/amap-jsapi-loader":"^1.0.1","@better-scroll/core":"^2.5.1","@better-scroll/pull-down":"^2.5.1","@jtsang/vite-plugin-style-import":"^2.0.0","@rollup/plugin-terser":"^0.4.4","@types/node":"^18.7.21","@vitejs/plugin-vue":"^3.1.0","@vueuse/core":"^10.1.2","any-touch":"^2.2.0","lodash":"^4.17.21","lottie-web":"^5.9.6","mitt":"^3.0.0","postcss-px-to-viewport-8-plugin":"^1.1.5","sass":"^1.55.0","vant":"^3.6.3","vite":"^3.1.0","vite-plugin-dts":"^2.3.0","vite-plugin-libcss":"^1.0.5","vite-plugin-svgicon":"^1.3.1","vite-plugin-theme":"^0.8.6","vite-plugin-vue-setup-extend":"^0.4.0","vite-svg-loader":"^4.0.0","vue":"^3.2.37","vue-tsc":"^0.40.13"},"author":{"name":"maybe"},"license":"MIT","homepage":"https://gitee.com/null_639_5368/m-chat/v3","readme":"# m-chat\r\n基于vue3的拆箱即用的IM组件
\r\n\r\n[](https://www.npmjs.com/package/@maybecode/m-chat)\r\n\r\n[](https://www.npmjs.com/package/@maybecode/m-chat)\r\n\r\n\r\n\r\n\r\n## 功能\r\n\r\n* [x] 文字展示（支持html标签渲染）\r\n* [x] 图片展示和预览\r\n* [x] 视频播放\r\n* [x] 语音播放\r\n* [x] 自定义默认头像\r\n* [x] 下拉加载更多\r\n* [x] 图片/视频/语音发送功能\r\n* [x] 提供自定义类型插槽（custom）进行业务的定制\r\n* [x] 支持Typescript\r\n\r\n## 示例\r\n\r\n示例源码：参考`examples`目录下面的`App.vue`文件\r\n在线示例：[Demo](http://null_639_5368.gitee.io/m-chat)\r\n\r\n## 安装\r\n\r\n```\r\nnpm install @maybecode/m-chat@next\r\n```\r\n\r\n## Props\r\n\r\n| 参数 | 类型 | 默认值 | 说明 |\r\n| ------------ | ---------------- | ------ | -------------------------------------------------------------------------------- |\r\n| messages | Array | [] | 消息数组 |\r\n| height | String | 100vh | 容器高度 |\r\n| refresh | Function | - | 刷新(加载更多)回调 |\r\n| config | Object | - | 高级配置(详情见下方config定义) |\r\n| disabledPull | Boolean | false | 禁用下拉刷新(可用于下拉数据加载完成后) |\r\n| historyId | [String, Number] | - | 历史信息最后一条id |\r\n| unReadId | [String, Number] | - | 第一条未读消息的id（默认滚动定位到第一条未读消息） |\r\n| beforeRecord | Function | - | 录音前执行函数 （可用于初始化录音相关）, 返回 true or false 决定是否执行录音逻辑 |\r\n\r\n\r\n\r\n\r\n## config \r\n\r\n默认配置 具体的参数规则在编辑器中都会有提示\r\n\r\n```js\r\n{\r\n /**\r\n * 主题\r\n */\r\n theme: 'light',\r\n /**\r\n * 图片上传配置(vant) 文件、视频...以此类推\r\n * @doc vant-uploader https://vant-contrib.gitee.io/vant/#/zh-CN/uploader#props\r\n * @warn 如果和imageUploader中的配置存在冲突那么以imageUploader为准\r\n */\r\n vanImageUploader: {},\r\n /**\r\n * 图片上传\r\n */\r\n imageUploader: {\r\n /**\r\n * 文件大小限制，单位为 kb\r\n */\r\n maxSize: 500,\r\n /**\r\n * 允许的文件类型\r\n */\r\n accept: [\"image/*\"]\r\n },\r\n /**\r\n * 文件上传\r\n */\r\n fileUploader: {\r\n maxSize: 500,\r\n accept: ['*'],\r\n },\r\n /**\r\n * 视频上传\r\n */\r\n videoUploader: {\r\n maxSize: 500,\r\n accept: ['video/*']\r\n },\r\n /**\r\n * 开放的功能\r\n */\r\n open: [\"text\", \"emoji\", \"image\",\"audio\", \"file\", \"video\"],\r\n /**\r\n * 扩展主面板功能\r\n * @demo [{\r\n type: \"location\",\r\n text: \"定位\",\r\n icon: \"location-o\" // 支持http(s)地址或者vant自带的icon\r\n }]\r\n * @description 配置此选项将额外的功能item添加到列表中\r\n */\r\n extPanelItems: [],\r\n /**\r\n * 下拉功能\r\n */\r\n pullDown: false,\r\n /**\r\n * 已读未读功能\r\n */\r\n read: false\r\n}\r\n```\r\n## msg(消息)对象\r\n\r\n```\r\n {\r\n id: null, // 唯一id\r\n name: \"\", // 姓名\r\n avatar: \"\", // 头像地址\r\n self: false, // 是否是自己\r\n type: \"text\", // 类型: text|image|audio|video|file|custom(这个type是自定义的,对应插槽名称)\r\n block: false,// 是否为单独块元素（去除头像背景等等相关元素）\r\n clearBg: false, // 去除背景但保留头像名称等特异性信息\r\n content:{\r\n text: \"\", // 文本\r\n duration: \"\", // 时长\r\n imageUrl: \"\", // 图片地址\r\n videoUrl: \"\", // 视频地址\r\n audioUrl: \"\", // 音频地址\r\n fileUrl: \"\", // 文件地址\r\n fileName: \"\", // 文件名称\r\n fileSize: \"\", // 文件大小\r\n fileExt: \"\", // 文件扩展名\r\n },\r\n time:'' // 发送时间\r\n }\r\n```\r\n\r\n## 事件\r\n\r\n| 事件名 | 说明 | 回调参数 |\r\n| -------------- | ---------------------------------------- | --------------------------------- |\r\n| submit | 文字、图片、视频、语音、文件等等发送事件 | ({ type:string, content:object }) |\r\n| recordStart | 录音开始 | |\r\n| recordStop | 录音停止 | |\r\n| recordCancel | 录音取消 | |\r\n| clickAvatar | 点击头像 | (item:object) |\r\n| clickPanelItem | 点击面板item（用于自定义panel item） | (item:object) |\r\n\r\n## Slots\r\n\r\n| 名称 | 说明 | 参数 |\r\n| ----------------------------- | ---------------- | -------- |\r\n| [custom(对应msg中的type属性)] | 自定义消息类型 | { item } |\r\n| panel | 自定义扩展面板 | - |\r\n| commentNav | 回复框上方导航栏 | - |\r\n\r\n## 方法\r\n\r\n通过 ref 可以获取到 m-chat 实例并调用实例方法\r\n\r\n| 方法名 | 说明 | 参数 | 返回值 |\r\n| ----------- | ----------------- | -------------- | ------ |\r\n| switchPanel | 扩展面板显示/隐藏 | (flag:boolean) | - |\r\n\r\n## 使用须知\r\n\r\n### 录音\r\n从3.0版本开始组件主体不再内置H5录音相关具体实现,如果有需求利用`recordStart`,`recordCancel`,`recordStop`相关回调和 [Recorder](https://github.com/xiangyuecn/Recorder) 录音库进行开发。\r\n对于微信公众号环境可以调用`JSSDK`中内置的录音方法配合回调来进行开发。\r\n","readmeFilename":"README.md","_id":"@maybecode/m-chat@3.0.17","_nodeVersion":"14.21.3","_npmVersion":"6.14.18","dist":{"integrity":"sha512-koZLurP8psXo8qkkXWs6UgS9GghpiA6QLAgXFZWXVeLByHCFnMnPejSFr5/8U2p5uVwApKdxGoiXbpUjXlpGwA==","shasum":"2e9c70a27fcafe489f0eb3756ed99b0b427f1b4a","tarball":"https://registry.npmjs.org/@maybecode/m-chat/-/m-chat-3.0.17.tgz","fileCount":20,"unpackedSize":4195772,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDFd840hrpGTCQrchVn16CaxWJOLRmVz409rygoR4Eo8AiA951BKj0Uq2SZXU2hp32UNknQ/PaFpAman+/gtqcq72A=="}]},"_npmUser":{"name":"qq1013480204","email":"1013480204@qq.com"},"directories":{},"maintainers":[{"name":"qq1013480204","email":"1013480204@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/m-chat_3.0.17_1704701961743_0.9505159629128237"},"_hasShrinkwrap":false}},"maintainers":[{"name":"qq1013480204","email":"1013480204@qq.com"}],"description":"[](https://www.npmjs.com/package/@maybecode/m-chat)\r [](https://www.npmjs.com/package/@maybecode/m-chat)\r [![npm](https://img.shields.io/b","homepage":"https://gitee.com/null_639_5368/m-chat","readme":"","readmeFilename":"","license":"MIT","repository":{"type":"git","url":"https://gitee.com/null_639_5368/m-chat.git"}}