lemon-imui-rx
Version:
基于lemon-imui的vue聊天组件，支持vue2.x
1 lines • 106 kB
JavaScript
(function(t){function e(e){for(var s,r,o=e[0],c=e[1],d=e[2],u=0,h=[];u<o.length;u++)r=o[u],Object.prototype.hasOwnProperty.call(i,r)&&i[r]&&h.push(i[r][0]),i[r]=0;for(s in c)Object.prototype.hasOwnProperty.call(c,s)&&(t[s]=c[s]);l&&l(e);while(h.length)h.shift()();return a.push.apply(a,d||[]),n()}function n(){for(var t,e=0;e<a.length;e++){for(var n=a[e],s=!0,o=1;o<n.length;o++){var c=n[o];0!==i[c]&&(s=!1)}s&&(a.splice(e--,1),t=r(r.s=n[0]))}return t}var s={},i={index:0},a=[];function r(e){if(s[e])return s[e].exports;var n=s[e]={i:e,l:!1,exports:{}};return t[e].call(n.exports,n,n.exports,r),n.l=!0,n.exports}r.m=t,r.c=s,r.d=function(t,e,n){r.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:n})},r.r=function(t){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},r.t=function(t,e){if(1&e&&(t=r(t)),8&e)return t;if(4&e&&"object"===typeof t&&t&&t.__esModule)return t;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var s in t)r.d(n,s,function(e){return t[e]}.bind(null,s));return n},r.n=function(t){var e=t&&t.__esModule?function(){return t["default"]}:function(){return t};return r.d(e,"a",e),e},r.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},r.p="";var o=window["webpackJsonp"]=window["webpackJsonp"]||[],c=o.push.bind(o);o.push=e,o=o.slice();for(var d=0;d<o.length;d++)e(o[d]);var l=c;a.push([0,"chunk-vendors"]),n()})({0:function(t,e,n){t.exports=n("c31f")},"05fe":function(t,e,n){"use strict";n("1a83")},"117e":function(t,e,n){},1513:function(t,e,n){},"1a83":function(t,e,n){},"323d":function(t,e,n){},"41d3":function(t,e,n){"use strict";n("8f91")},"4c77":function(t,e,n){"use strict";n("d6f8")},5778:function(t,e,n){"use strict";n("80be")},"61c8":function(t,e,n){},"68b9":function(t,e,n){"use strict";n("1513")},"69bb":function(t,e,n){"use strict";n("ba05")},"6a2b":function(t,e,n){},"718e":function(t,e,n){"use strict";n("dfa9")},"80be":function(t,e,n){},"83a1":function(t,e,n){},"85ff":function(t,e,n){"use strict";n("cb50")},"8bcf":function(t,e,n){},"8f91":function(t,e,n){},"8fb6":function(t,e,n){"use strict";n("83a1")},9224:function(t){t.exports=JSON.parse('{"name":"lemon-imui-rx","version":"2.0.0","main":"dist/index.umd.min.js","description":"基于lemon-imui的vue聊天组件，支持vue2.x","homepage":"http://june000.gitee.io/lemon-im/","keywords":["vue","im","chat","vueim","vuechat","webim","webchat"],"repository":{"type":"git","url":"git+https://github.com/fanjyy/lemon-imui.git"},"scripts":{"serve":"vue-cli-service serve","build":"vue-cli-service build --target lib --name index packages/index.js","build-examples":"vue-cli-service build --dest examples/dist examples/main.js","lint":"vue-cli-service lint"},"peerDependencies":{"vue":"^2.6.10"},"devDependencies":{"@vue/cli-plugin-babel":"^3.6.0","@vue/cli-plugin-eslint":"^3.6.0","@vue/cli-service":"^3.6.0","@vue/eslint-config-prettier":"^4.0.1","babel-eslint":"^10.0.2","eslint":"^5.16.0","eslint-plugin-vue":"^5.2.3","stylus":"^0.54.5","stylus-loader":"^3.0.2","vue-template-compiler":"^2.5.21"},"author":"fanjun","license":"MIT","dependencies":{"chatarea":"^4.6.5"}}')},"93f9":function(t,e,n){"use strict";n("323d")},ab30:function(t,e,n){},b25a:function(t,e,n){"use strict";n("ab30")},ba05:function(t,e,n){},bd0d:function(t,e,n){"use strict";n("cfe1")},bd33:function(t,e,n){"use strict";n("e6e3")},c31f:function(t,e,n){"use strict";n.r(e);n("cadf"),n("551c"),n("f751"),n("097d");var s=n("2b0e"),i=function(){var t=this,e=t._self._c;return e("div",{attrs:{id:"app"}},[e("div",{staticClass:"scroll-top",on:{click:t.scrollToTop}},[t._v("🚀")]),e("div",{staticClass:"logo"},[e("div",{staticClass:"logo-text"},[e("b",[t._v("Lemon")]),t._v(" IMUI"),e("span",{staticClass:"logo-badge"},[t._v(t._s(this.packageData.version))])]),e("div",{staticClass:"logo-sub"},[t._v(t._s(this.packageData.description))]),t._m(0),e("br"),t._m(1),t._m(2)]),e("div",{staticClass:"imui-center"},[e("lemon-imui",{ref:"IMUI",attrs:{user:t.user,contextmenu:t.contextmenu,"contact-contextmenu":t.contactContextmenu,theme:t.theme,"hide-menu":t.hideMenu,"hide-menu-avatar":t.hideMenuAvatar,"hide-message-name":t.hideMessageName,"hide-message-time":t.hideMessageTime},on:{"change-menu":t.handleChangeMenu,"change-contact":t.handleChangeContact,"pull-messages":t.handlePullMessages,"message-click":t.handleMessageClick,"menu-avatar-click":t.handleMenuAvatarClick,send:t.handleSend},scopedSlots:t._u([{key:"cover",fn:function(){return[e("div",{staticClass:"cover"},[e("i",{staticClass:"lemon-icon-message"}),e("p",[e("b",[t._v("自定义封面 Lemon")]),t._v(" IMUI")])])]},proxy:!0},{key:"message-title",fn:function(n){return[e("span",[t._v(t._s(n.displayName))]),e("small",{staticClass:"more",on:{click:function(e){return t.changeDrawer(n,t.$refs.IMUI)}}},[t._v(t._s(t.$refs.IMUI&&t.$refs.IMUI.drawerVisible?"关闭":"打开")+"抽屉")]),e("br")]}}])}),e("a",{staticStyle:{"font-size":"14px"},attrs:{target:"_blank",href:"https://codesandbox.io/s/sweet-chaplygin-s24mb?fontsize=14&hidenavigation=1&theme=dark"}},[t._v("在线编辑代码")]),e("div",{staticClass:"action"},[e("lemon-button",{on:{click:t.appendMessage}},[t._v("发送消息")]),e("lemon-button",{on:{click:t.appendEventMessage}},[t._v("发送 event 消息")]),e("lemon-button",{on:{click:t.removeMessage}},[t._v("删除最近一条消息")]),e("lemon-button",{on:{click:t.updateMessage}},[t._v("修改消息")]),e("lemon-button",{on:{click:t.appendCustomMessage}},[t._v("自定义消息")]),e("br"),e("lemon-button",{on:{click:t.updateContact}},[t._v("修改联系人信息")]),e("lemon-button",{on:{click:t.changeMenuVisible}},[t._v("切换导航显示")]),e("lemon-button",{on:{click:t.changeMenuAvatarVisible}},[t._v("切换头像显示")]),e("lemon-button",{on:{click:t.changeMessageNameVisible}},[t._v("切换聊天窗口内名字显示")]),e("lemon-button",{on:{click:t.changeMessageTimeVisible}},[t._v("切换聊天窗口内时间显示")]),e("lemon-button",{on:{click:t.changeTheme}},[t._v("切换主题，当前主题："+t._s(this.theme))])],1)],1),e("div",{staticStyle:{display:"flex"}},[e("div",[e("div",{staticClass:"title"},[t._v("自定义")]),e("div",{staticClass:"imui-center"},[e("qq-imui",[t._v("12312312")])],1)]),e("div",{staticStyle:{margin:"0 55px"}},[e("div",{staticClass:"title"},[t._v("精简模式")]),e("div",{staticClass:"imui-center"},[e("lemon-imui",{ref:"SimpleIMUI",staticClass:"lemon-simple",attrs:{user:t.user,width:"340px","avatar-cricle":!0,simple:""},on:{"pull-messages":t.handlePullMessages,"message-click":t.handleMessageClick,send:t.handleSend}}),e("a",{staticStyle:{"font-size":"14px"},attrs:{target:"_blank",href:"https://codesandbox.io/s/lemon-imui-jingjianmoshi-forked-1lvoh?fontsize=14&hidenavigation=1&theme=dark"}},[t._v("在线编辑代码")])],1)])]),e("div",{staticClass:"title"},[t._v("联系人 Contact")]),t._m(3),e("div",{staticClass:"title"},[t._v("消息体 Message")]),t._m(4),e("div",{staticClass:"title"},[t._v("右键菜单 ContextmenuItem")]),t._m(5),e("div",{staticClass:"title"},[t._v("抽屉配置 DrawerOption")]),t._m(6),e("div",{staticClass:"title"},[t._v("组件属性")]),t._m(7),e("div",{staticClass:"title"},[t._v("组件方法")]),t._m(8),e("div",{staticClass:"title"},[t._v("组件插槽")]),t._m(9),e("div",{staticClass:"title"},[t._v("组件事件")]),t._m(10),e("div",{staticClass:"title",attrs:{id:"help1"}},[t._v("如何创建自定义消息？")]),e("div",[t._m(11),e("pre",[t._v('{\n //值为 voice，用于解析的组件 name 必须为 lemonMessageVoice\n type: "voice",\n content: \'语音消息\',\n //自定义参数\n params1:\'参数1\',\n params2:\'参数2\',\n //必传参数\n id: "message-id",\n //必传参数\n fromUser:{\n avatar: ""\n displayName: "June"\n id: "1"\n },\n //必传参数\n sendTime: 1610872045162\n //必传参数\n status: "succeed"\n //必传参数\n toContactId: "contact-id"\n}\n ')]),e("p",[t._v("创建用于解析该消息的组件。")]),e("pre",[t._v(t._s(t.tip))]),e("p",[t._v("IMUI初始化的时候，设置左侧联系人最新消息的渲染内容")]),e("pre",[t._v("IMUI.setLastContentRender('voice', message => {\n return <span>[语音]</span>\n})\n")]),e("p",[t._v("最后一步，注册组件，必须使用全局注册的方式。")]),e("pre",[t._v("import Vue from 'vue';\nimport LemonMessageVoice from './lemon-message-voice';\nVue.component(LemonMessageVoice.name,LemonMessageVoice);\n")]),e("p",[t._v("如果还有不明白的，可以到 examples/App.vue 查看示例代码")])]),e("div",{staticClass:"title",attrs:{id:"help2"}},[t._v("如何对接后端接口？")]),e("p",[t._v("1.初始化用户的信息")]),e("pre",{domProps:{textContent:t._s("data(){\n return {\n user:{id:1:displayName:'June',avatar:''}\n }\n}")}}),e("pre",{domProps:{textContent:t._s("<lemon-imui :user='this.user' ref='IMUI'></lemon-imui>")}}),e("p",[t._v("2.初始化联系人数据")]),e("pre",{domProps:{textContent:t._s("mounted(){\n const { IMUI } = this.$refs;\n //初始化表情包。\n IMUI.initEmoji(...);\n //从后端请求联系人数据，包装成下面的样子\n const contacts = [{\n id: 2,\n displayName: '丽安娜',\n avatar:'',\n index: 'L',\n unread: 0,\n //最近一条消息的内容，如果值为空，不会出现在“聊天”列表里面。\n //lastContentRender 函数会将 file 消息转换为 '[文件]', image 消息转换为 '[图片]'，对 text 会将文字里的表情标识替换为img标签,\n lastContent: IMUI.lastContentRender({type:'text',content:'你在干嘛呢？'})\n //最近一条消息的发送时间\n lastSendTime: 1566047865417,\n }];\n IMUI.initContacts(contacts);\n}")}}),e("p",[t._v("3.拉取消息列表")]),e("p",[t._v("\n 现在刷新页面应该能够看到联系人了，但是点击联系人的话右边会一直处于加载中，这时需要监听\n pull-messages 事件。\n ")]),e("pre",{domProps:{textContent:t._s("<lemon-imui :user='this.user' ref='IMUI' @pull-messages='handlePullMessages'></lemon-imui>")}}),e("pre",{domProps:{textContent:t._s("methods:{\n handlePullMessages(contact, next) {\n //从后端请求消息数据，包装成下面的样子\n const messages = [{\n id: '唯一消息ID',\n status: 'succeed',\n type: 'text',\n sendTime: 1566047865417,\n content: '你什么才能对接完？',\n toContactId: contact.id,\n fromUser:this.user\n }]\n //将第二个参数设为true，表示已到末尾，聊天窗口顶部会显示“暂无更多消息”，不然会一直转圈。\n next(messages,true);\n },\n}")}}),e("p",[t._v("4.发送消息")]),e("p",[t._v("现在在消息框发送新消息会一直转圈，这时需要监听 send 事件。")]),e("pre",{domProps:{textContent:t._s("methods:{\n handleSend(message, next, file) {\n ... 调用你的消息发送业务接口\n\n //执行到next消息会停止转圈，如果接口调用失败，可以修改消息的状态 next({status:'failed'});\n next();\n },\n}")}}),e("p",[t._v("5.接收消息")]),e("p",[t._v("接收消息需要将toContactId设置为发送人，这时系统才能识别到对应的联系人。如果appendMessage()是自己的消息，unread不会自增。")]),e("pre",{domProps:{textContent:t._s("mounted(){\n\nWebSocket.onmessage = function(event) {\n //将接收到的数据包装成下面的样子\n const data = {\n id: '唯一消息ID',\n status: 'succeed',\n type: 'text',\n sendTime: 1566047865417,\n content: '马上就对接完了！',\n toContactId: 2,\n fromUser:{\n //如果 id == this.user.id消息会显示在右侧，否则在左侧\n id:2,\n displayName:'丽安娜',\n avatar:'',\n }\n };\n IMUI.appendMessage(data);\n};\n \n}")}})])},a=[function(){var t=this,e=t._self._c;return e("div",{staticClass:"link"},[e("span",[t._v("源码下载 ")]),e("a",{attrs:{target:"_blank",href:"https://github.com/fanjyy/lemon-imui"}},[t._v("Github")]),e("a",{attrs:{target:"_blank",href:"https://gitee.com/june000/lemon-im"}},[t._v("Gitee")]),e("a",{attrs:{target:"_blank",href:"https://qm.qq.com/cgi-bin/qm/qr?k=xzUa9CPYQ5KCNQ86h7ep4Z3TtkqJxRZE&jump_from=webapi"}},[t._v("QQ交流群：1081773406")])])},function(){var t=this,e=t._self._c;return e("div",[e("a",{staticStyle:{"font-size":"14px"},attrs:{href:"#help1"}},[t._v("1.如何创建自定义消息？")])])},function(){var t=this,e=t._self._c;return e("div",[e("a",{staticStyle:{"font-size":"14px"},attrs:{href:"#help2"}},[t._v("2.如何对接后端接口？")])])},function(){var t=this,e=t._self._c;return e("table",{staticClass:"table"},[e("tr",{staticClass:"table-head"},[e("th",[t._v("参数")]),e("th",[t._v("说明")]),e("th",[t._v("类型")]),e("th",[t._v("默认值")]),e("th",[t._v("示例")])]),e("tr",[e("td",{attrs:{width:"150"}},[t._v("id")]),e("td",{attrs:{width:"350"}},[t._v("唯一ID")]),e("td",{attrs:{width:"150"}},[t._v("String/Number")]),e("td",{attrs:{width:"100"}},[t._v("-")]),e("td")]),e("tr",[e("td",[t._v("displayName")]),e("td",[t._v("名称")]),e("td",[t._v("String")]),e("td",[t._v("-")]),e("td")]),e("tr"),e("tr",[e("td",[t._v("avatar")]),e("td",[t._v("头像")]),e("td",[t._v("String")]),e("td",[t._v("-")]),e("td")]),e("tr",[e("td",[t._v("index")]),e("td",[t._v("\n 通讯录索引，传入字母或数字进行排序，索引可以显示自定义文字“[1]群组”\n ")]),e("td",[t._v("String")]),e("td",[t._v("-")]),e("td")]),e("tr",[e("td",[t._v("unread")]),e("td",[t._v("未读消息数")]),e("td",[t._v("Number")]),e("td",[t._v("0")]),e("td")]),e("tr",[e("td",[t._v("lastSendTime")]),e("td",[t._v("最近一条消息的时间戳，13位毫秒")]),e("td",[t._v("timestamp")]),e("td",[t._v("0")]),e("td")]),e("tr",[e("td",[t._v("lastContent")]),e("td",[t._v("最近一条消息的内容")]),e("td",[t._v("String | Vnode")]),e("td"),e("td")])])},function(){var t=this,e=t._self._c;return e("table",{staticClass:"table"},[e("tr",{staticClass:"table-head"},[e("th",[t._v("参数")]),e("th",[t._v("说明")]),e("th",[t._v("类型")]),e("th",[t._v("默认值")]),e("th",[t._v("示例")])]),e("tr",[e("td",{attrs:{width:"150"}},[t._v("id")]),e("td",{attrs:{width:"350"}},[t._v("唯一ID")]),e("td",{attrs:{width:"150"}},[t._v("String/Number")]),e("td",{attrs:{width:"100"}},[t._v("-")]),e("td",[t._v("如果消息的ID发生相同的情况下appendMessage()方法无效")])]),e("tr",[e("td",[t._v("status")]),e("td",[t._v("消息发送的状态：going | failed | succeed")]),e("td",[t._v("String")]),e("td",[t._v("-")]),e("td")]),e("tr"),e("tr",[e("td",[t._v("type")]),e("td",[t._v("消息类型：file | image | text | event")]),e("td",[t._v("String | Vnode")]),e("td",[t._v("-")]),e("td")]),e("tr",[e("td",[t._v("sendTime")]),e("td",[t._v("消息发送时间，13位毫秒")]),e("td",[t._v("timestamp")]),e("td",[t._v("-")]),e("td")]),e("tr",[e("td",[t._v("content")]),e("td",[t._v("消息内容，如果type=file，此属性表示文件的URL地址")]),e("td",[t._v("String")]),e("td",[t._v("-")]),e("td")]),e("tr",[e("td",[t._v("at")]),e("td",[t._v("被@提及到的用户ID列表")]),e("td",[t._v("Array")]),e("td",[t._v("-")]),e("td",[t._v("[2,4]")])]),e("tr",[e("td",[t._v("fileSize")]),e("td",[t._v("文件大小")]),e("td",[t._v("Number")]),e("td",[t._v("0")]),e("td")]),e("tr",[e("td",[t._v("fileName")]),e("td",[t._v("文件名称")]),e("td",[t._v("String")]),e("td",[t._v("-")]),e("td")]),e("tr",[e("td",[t._v("toContactId")]),e("td",[t._v("接收消息的联系人ID")]),e("td",[t._v("String | Number")]),e("td",[t._v("-")]),e("td",[t._v("作为发送者时为接收消息的联系人ID；作为接收者时为发送消息的联系人ID。")])]),e("tr",[e("td",[t._v("fromUser")]),e("td",[t._v("消息发送人的信息")]),e("td",[t._v("Object")]),e("td",[t._v("-")]),e("td",[t._v('{id: "1",displayName: "测试",avatar: "url"};')])])])},function(){var t=this,e=t._self._c;return e("table",{staticClass:"table"},[e("tr",{staticClass:"table-head"},[e("th",[t._v("名称")]),e("th",[t._v("说明")]),e("th",[t._v("类型")]),e("th",[t._v("示例")])]),e("tr",[e("td",{attrs:{width:"150"}},[t._v("text")]),e("td",{attrs:{width:"350"}},[t._v("显示文字")]),e("td",{attrs:{width:"150"}},[t._v("String")]),e("td",{attrs:{width:"100"}},[t._v("-")]),e("td")]),e("tr",[e("td",{attrs:{width:"150"}},[t._v("color")]),e("td",{attrs:{width:"350"}},[t._v("颜色")]),e("td",{attrs:{width:"150"}},[t._v("String")]),e("td",{attrs:{width:"100"}},[t._v("-")]),e("td")]),e("tr",[e("td",{attrs:{width:"150"}},[t._v("icon")]),e("td",{attrs:{width:"350"}},[t._v("图标 class")]),e("td",{attrs:{width:"150"}},[t._v("String")]),e("td",{attrs:{width:"100"}},[t._v("-")]),e("td")]),e("tr",[e("td",{attrs:{width:"150"}},[t._v("click")]),e("td",{attrs:{width:"350"}},[t._v("点击事件，调用hide方法隐藏右键菜单。")]),e("td",{attrs:{width:"150"}},[t._v("Function(e,instance,hide)")]),e("td",{attrs:{width:"100"}},[t._v("-")]),e("td")]),e("tr",[e("td",{attrs:{width:"150"}},[t._v("visible")]),e("td",{attrs:{width:"350"}},[t._v("是否显示的判断函数")]),e("td",{attrs:{width:"150"}},[t._v("Function(instance)")]),e("td",{attrs:{width:"100"}},[t._v("-")]),e("td")]),e("tr",[e("td",{attrs:{width:"150"}},[t._v("render")]),e("td",{attrs:{width:"350"}},[t._v("\n 负责样式的渲染函数，使用render的时候text属性会失去作用，调用hide方法隐藏右键菜单。\n ")]),e("td",{attrs:{width:"150"}},[t._v("Function(e,instance,hide)")]),e("td",{attrs:{width:"100"}},[t._v("-")]),e("td")])])},function(){var t=this,e=t._self._c;return e("table",{staticClass:"table"},[e("tr",{staticClass:"table-head"},[e("th",[t._v("名称")]),e("th",[t._v("说明")]),e("th",[t._v("类型")]),e("th",[t._v("示例")])]),e("tr",[e("td",{attrs:{width:"150"}},[t._v("width")]),e("td",{attrs:{width:"350"}},[t._v("宽度，可以设置百分比")]),e("td",{attrs:{width:"150"}},[t._v("String | Number")]),e("td",{attrs:{width:"100"}},[t._v("-")]),e("td")]),e("tr",[e("td",{attrs:{width:"150"}},[t._v("height")]),e("td",{attrs:{width:"350"}},[t._v("高度，可以设置百分比")]),e("td",{attrs:{width:"150"}},[t._v("String | Number")]),e("td",{attrs:{width:"100"}},[t._v("-")]),e("td")]),e("tr",[e("td",{attrs:{width:"150"}},[t._v("offsetX")]),e("td",{attrs:{width:"350"}},[t._v("X偏移值，可以设置百分比")]),e("td",{attrs:{width:"150"}},[t._v("String | Number")]),e("td",{attrs:{width:"100"}},[t._v("-")]),e("td")]),e("tr",[e("td",{attrs:{width:"150"}},[t._v("offsetY")]),e("td",{attrs:{width:"350"}},[t._v("Y偏移值，可以设置百分比")]),e("td",{attrs:{width:"150"}},[t._v("String | Number")]),e("td",{attrs:{width:"100"}},[t._v("-")]),e("td")]),e("tr",[e("td",{attrs:{width:"150"}},[t._v("position")]),e("td",{attrs:{width:"350"}},[t._v("位置")]),e("td",{attrs:{width:"150"}},[t._v("right | rightInside | center")]),e("td",{attrs:{width:"100"}},[t._v("-")]),e("td")])])},function(){var t=this,e=t._self._c;return e("table",{staticClass:"table"},[e("tr",{staticClass:"table-head"},[e("th",[t._v("参数")]),e("th",[t._v("说明")]),e("th",[t._v("类型")]),e("th",[t._v("默认值")]),e("th",[t._v("示例")])]),e("tr",[e("td",{attrs:{width:"150"}},[t._v("user")]),e("td",{attrs:{width:"350"}},[t._v("用户信息")]),e("td",{attrs:{width:"150"}},[t._v("Object")]),e("td",{attrs:{width:"100"}},[t._v("-")]),e("td",[t._v('{id: "1",displayName: "测试",avatar: "url"};')])]),e("tr",[e("td",{attrs:{width:"150"}},[t._v("width")]),e("td",{attrs:{width:"350"}},[t._v("宽度")]),e("td",{attrs:{width:"150"}},[t._v("String")]),e("td",{attrs:{width:"100"}},[t._v("850px")]),e("td")]),e("tr",[e("td",{attrs:{width:"150"}},[t._v("height")]),e("td",{attrs:{width:"350"}},[t._v("高度")]),e("td",{attrs:{width:"150"}},[t._v("String")]),e("td",{attrs:{width:"100"}},[t._v("580px")]),e("td")]),e("tr",[e("td",{attrs:{width:"150"}},[t._v("theme")]),e("td",{attrs:{width:"350"}},[t._v("主题")]),e("td",{attrs:{width:"150"}},[t._v("default | blue")]),e("td",{attrs:{width:"100"}},[t._v("default")]),e("td")]),e("tr",[e("td",{attrs:{width:"150"}},[t._v("loadingText")]),e("td",{attrs:{width:"350"}},[t._v("消息加载文字")]),e("td",{attrs:{width:"150"}},[t._v("String | Function")]),e("td",{attrs:{width:"100"}}),e("td")]),e("tr",[e("td",{attrs:{width:"150"}},[t._v("loadendText")]),e("td",{attrs:{width:"350"}},[t._v("消息加载结束文字")]),e("td",{attrs:{width:"150"}},[t._v("String | Function")]),e("td",{attrs:{width:"100"}},[t._v("暂无更多消息")]),e("td")]),e("tr",[e("td",{attrs:{width:"150"}},[t._v("avatarCricle")]),e("td",{attrs:{width:"350"}},[t._v("使用圆形头像")]),e("td",{attrs:{width:"150"}},[t._v("Boolean")]),e("td",{attrs:{width:"100"}},[t._v("false")]),e("td")]),e("tr",[e("td",{attrs:{width:"150"}},[t._v("sendText")]),e("td",{attrs:{width:"350"}},[t._v("发送消息按钮的文字")]),e("td",{attrs:{width:"150"}},[t._v("String")]),e("td",{attrs:{width:"100"}},[t._v("发送消息")]),e("td")]),e("tr",[e("td",{attrs:{width:"150"}},[t._v("wrapKey")]),e("td",{attrs:{width:"350"}},[t._v("输入框换行检查函数")]),e("td",{attrs:{width:"150"}},[t._v("Function(event)=>Boolean")]),e("td",{attrs:{width:"100"}}),e("td",[t._v("\n (e)=>e.keyCode == 13 && e.ctrlKey == false && e.shiftKey == false;\n ")])]),e("tr",[e("td",{attrs:{width:"150"}},[t._v("sendKey")]),e("td",{attrs:{width:"350"}},[t._v("快捷发送键检查函数")]),e("td",{attrs:{width:"150"}},[t._v("Function(event)=>Boolean")]),e("td",{attrs:{width:"100"}}),e("td",[t._v("(e)=>e.keyCode == 13 && e.ctrlKey")])]),e("tr",[e("td",{attrs:{width:"150"}},[t._v("simple")]),e("td",{attrs:{width:"350"}},[t._v("精简模式")]),e("td",{attrs:{width:"150"}},[t._v("Boolean")]),e("td",{attrs:{width:"100"}},[t._v("false")]),e("td",[t._v("\n 精简模式下左侧的导航和联系人列表会隐藏，初始化时需要手动调用\n changeContact 切换到聊天视图。\n ")])]),e("tr",[e("td",[t._v("messageTimeFormat")]),e("td",[t._v("消息列表时间格式化函数")]),e("td",[t._v("Function(time)=>String")]),e("td",[t._v("-")]),e("td")]),e("tr",[e("td",[t._v("contactTimeFormat")]),e("td",[t._v("联系人时间格式化规则")]),e("td",[t._v("Function(time)=>String")]),e("td",[t._v("-")]),e("td")]),e("tr",[e("td",[t._v("hideDrawer")]),e("td",[t._v("是否隐藏抽屉")]),e("td",[t._v("Boolean")]),e("td",[t._v("true")]),e("td")]),e("tr",[e("td",[t._v("hideMenuAvatar")]),e("td",[t._v("是否隐藏导航头像")]),e("td",[t._v("Boolean")]),e("td",[t._v("false")]),e("td")]),e("tr",[e("td",[t._v("hideMenu")]),e("td",[t._v("是否隐藏左侧导航")]),e("td",[t._v("Boolean")]),e("td",[t._v("false")]),e("td")]),e("tr",[e("td",[t._v("hideMessageName")]),e("td",[t._v("是否隐藏聊天窗口内的联系人名字")]),e("td",[t._v("Boolean")]),e("td",[t._v("false")]),e("td")]),e("tr",[e("td",[t._v("hideMessageTime")]),e("td",[t._v("是否隐藏聊天窗口内的消息发送时间")]),e("td",[t._v("Boolean")]),e("td",[t._v("false")]),e("td")]),e("tr",[e("td",[t._v("contextmenu")]),e("td",[t._v("聊天消息右键菜单配置")]),e("td",[t._v("[ContextmenuItem]")]),e("td",[t._v("-")]),e("td")]),e("tr",[e("td",[t._v("contactContextmenu")]),e("td",[t._v("联系人右键菜单配置")]),e("td",[t._v("[ContextmenuItem]")]),e("td",[t._v("-")]),e("td")])])},function(){var t=this,e=t._self._c;return e("table",{staticClass:"table"},[e("tr",{staticClass:"table-head"},[e("th",[t._v("参数")]),e("th",[t._v("说明")]),e("th",[t._v("类型")]),e("th",[t._v("默认值")]),e("th",[t._v("示例")])]),e("tr",[e("td",{attrs:{width:"150"}},[t._v("initMenus")]),e("td",{attrs:{width:"350"}},[t._v("初始化导航")]),e("td",{attrs:{width:"150"}},[t._v("Function([Object])")]),e("td",{attrs:{width:"100"}},[t._v('[ { name: "messages" }, { name: "contacts" }]')]),e("td",[t._v('\n { name: "custom2", title: "自定义按钮2", unread: 0, click: () => {\n alert("拦截导航点击事件"); }, render: menu => { return \'...\'; },\n isBottom: true }\n ')])]),e("tr",[e("td",[t._v("initContacts")]),e("td",[t._v("初始化联系人")]),e("td",[t._v("Function([Contact])")]),e("td",[t._v("-")]),e("td")]),e("tr",[e("td",[t._v("initEditorTools")]),e("td",[t._v("初始化工具栏")]),e("td",[t._v("Function([Object])")]),e("td",[t._v("[{name:'emoji'},{name:'uploadFile'},{name:'uploadImage'}]")]),e("td",[t._v("\n [{ name:\"test2\", isRight:true, title:'上传 Excel', click:()=>{\n alert('点击') }, render:()=>{ return '...' } }]\n ")])]),e("tr",[e("td",[t._v("initEmoji")]),e("td",[t._v("初始化表情数据")]),e("td",[t._v("Function([Object])")]),e("td",[t._v("-")]),e("td",[e("div",[t._v("\n 有分类：[{ label: '默认表情', children: [ { name: '1f62c', title:\n '微笑', src: 'https://twemoji.maxcdn.com/2/72x72/1f62c.png' } ] }]\n ")]),e("div",[t._v("\n 无分类：[{ name: '1f62c', title: '微笑', src:\n 'https://twemoji.maxcdn.com/2/72x72/1f62c.png' }]\n ")])])]),e("tr",[e("td",[t._v("appendMessage")]),e("td",[t._v("\n 新增一条消息, 如果当前焦点在该联系人的聊天窗口，设置\n scrollToBottom=true 添加之后自动定位到消息窗口底部\n ")]),e("td",[t._v("Function(Message,scrollToBottom=false)")]),e("td",[t._v("-")]),e("td")]),e("tr",[e("td",[t._v("removeMessage")]),e("td",[t._v("删除聊天消息")]),e("td",[t._v("Function(Message.id)")]),e("td",[t._v("-")]),e("td")]),e("tr",[e("td",[t._v("updateMessage")]),e("td",[t._v("\n 修改消息，根据 Message.id\n 查找聊天消息并覆盖传入的值（toContactId会被忽略）\n ")]),e("td",[t._v("Function(Message)")]),e("td",[t._v("-")]),e("td")]),e("tr",[e("td",[t._v("appendContact")]),e("td",[t._v("添加联系人")]),e("td",[t._v("Function(Contact)")]),e("td",[t._v("-")]),e("td")]),e("tr",[e("td",[t._v("removeContact")]),e("td",[t._v("删除联系人")]),e("td",[t._v("Function(Contact.id)")]),e("td",[t._v("-")]),e("td")]),e("tr",[e("td",[t._v("updateContact")]),e("td",[t._v("修改联系人，根据 Contact.id 查找联系人并覆盖传入的值")]),e("td",[t._v("Function(Contact)")]),e("td",[t._v("-")]),e("td")]),e("tr",[e("td",[t._v("clearMessages")]),e("td",[t._v("\n 清空某个联系人的本地消息记录，重新切换到该联系人时会再次触发pull-messages事件，Contact.id为空则清空所有\n ")]),e("td",[t._v("Function(Contact.id)=>Boolean")]),e("td",[t._v("-")]),e("td")]),e("tr",[e("td",[t._v("getMessages")]),e("td",[t._v("返回所有本地消息，传入 Contact.id 则只返回与该联系人的消息")]),e("td",[t._v("Function(Contact.id)=>[Message]")]),e("td",[t._v("-")]),e("td")]),e("tr",[e("td",[t._v("getCurrentContact")]),e("td",[t._v("返回当前聊天窗口的联系人信息")]),e("td",[t._v("Function()=>Contact")]),e("td",[t._v("-")]),e("td")]),e("tr",[e("td",[t._v("getCurrentMessages")]),e("td",[t._v("返回当前聊天窗口的所有消息")]),e("td",[t._v("Function()=>[Message]")]),e("td",[t._v("-")]),e("td")]),e("tr",[e("td",[t._v("getContacts")]),e("td",[t._v("返回所有本地联系人")]),e("td",[t._v("Function()=>[Contact]")]),e("td",[t._v("-")]),e("td")]),e("tr",[e("td",[t._v("openDrawer")]),e("td",[t._v("打开联系人右侧抽屉，vnode 为抽屉内容")]),e("td",[t._v("Function(vnode)")]),e("td",[t._v("-")]),e("td")]),e("tr",[e("td",[t._v("changeDrawer")]),e("td",[t._v("切换右侧抽屉显示/隐藏，vnode 为抽屉内容")]),e("td",[t._v("Function(DrawerOption)")]),e("td",[t._v("-")]),e("td")]),e("tr",[e("td",[t._v("closeDrawer")]),e("td",[t._v("关闭抽屉")]),e("td",[t._v("Function()")]),e("td",[t._v("-")]),e("td")]),e("tr",[e("td",[t._v("changeMenu")]),e("td",[t._v("切换左侧导航")]),e("td",[t._v("Function(Menu.name)")]),e("td",[t._v("-")]),e("td")]),e("tr",[e("td",[t._v("changeContact")]),e("td",[t._v("切换聊天窗口")]),e("td",[t._v("Function(Contact.id,instance)")]),e("td",[t._v("-")]),e("td")]),e("tr",[e("td",[t._v("messageViewToBottom")]),e("td",[t._v("将当前聊天窗口滚动到底部")]),e("td",[t._v("Function()")]),e("td",[t._v("-")]),e("td")]),e("tr",[e("td",[t._v("setLastContentRender")]),e("td",[t._v("设置左侧联系人最新消息的渲染函数")]),e("td",[t._v("Function(Message.type, (Message)=>vnode)")]),e("td",[t._v("-")]),e("td",[t._v("\n setLastContentRender('image', message => { return\n "),e("span",[t._v("[最新图片]")]),t._v("\n })\n ")])]),e("tr",[e("td",[t._v("lastContentRender")]),e("td",[t._v("用来生成 Message.lastContent 需要的vnode结构。")]),e("td",[t._v("Function(Message)")]),e("td",[t._v("-")]),e("td")]),e("tr",[e("td",[t._v("setEditorValue")]),e("td",[t._v("设置编辑框内容")]),e("td",[t._v("Function(string)")]),e("td",[t._v("-")]),e("td")]),e("tr",[e("td",[t._v("getEditorValue")]),e("td",[t._v("获取编辑框内容")]),e("td",[t._v("Function()=>string")]),e("td",[t._v("-")]),e("td")]),e("tr",[e("td",[t._v("setAtUserList")]),e("td",[t._v("设置@人员的列表")]),e("td",[t._v("Function(UserList,callEvery)")]),e("td",[t._v("-")]),e("td",[t._v('[{id: "1",displayName: "测试",avatar: "url",name_py:\'ceshi\'}]，callEvery是否需要@所有人')])]),e("tr",[e("td",[t._v("setUserTag")]),e("td",[t._v("设置输入框内@的人")]),e("td",[t._v("Function(Object)")]),e("td",[t._v("-")]),e("td",[t._v('{id: "1",displayName: "测试"}')])]),e("tr",[e("td",[t._v("latelyContacts")]),e("td",[t._v("设置左侧列表的方法，可以更改最近联系人的列表")]),e("td",[t._v("Function(contact)")]),e("td",[t._v("-")]),e("td",[t._v("-")])])])},function(){var t=this,e=t._self._c;return e("table",{staticClass:"table"},[e("tr",{staticClass:"table-head"},[e("th",[t._v("插槽名")]),e("th",[t._v("说明")]),e("th",[t._v("参数")])]),e("tr",[e("td",{attrs:{width:"150"}},[t._v("cover")]),e("td",{attrs:{width:"350"}},[t._v("初始化时的封面")]),e("td",{attrs:{width:"150"}},[t._v("-")])]),e("tr",[e("td",{attrs:{width:"150"}},[t._v("editor-footer")]),e("td",{attrs:{width:"350"}},[t._v("消息输入框底部")]),e("td",{attrs:{width:"150"}},[t._v("-")])]),e("tr",[e("td",{attrs:{width:"150"}},[t._v("message-title")]),e("td",{attrs:{width:"350"}},[t._v("消息列表的标题")]),e("td",{attrs:{width:"150"}},[t._v("Contact")])]),e("tr",[e("td",{attrs:{width:"150"}},[t._v("message-after")]),e("td",{attrs:{width:"350"}},[t._v("每条消息的尾部")]),e("td",{attrs:{width:"150"}},[t._v("Message")])]),e("tr",[e("td",{attrs:{width:"150"}},[t._v("sidebar-message")]),e("td",{attrs:{width:"350"}},[t._v("左侧最新消息列表插槽")]),e("td",{attrs:{width:"150"}},[t._v("Contact")])]),e("tr",[e("td",{attrs:{width:"150"}},[t._v("sidebar-contact")]),e("td",{attrs:{width:"350"}},[t._v("左侧联系人列表插槽")]),e("td",{attrs:{width:"150"}},[t._v("Contact")])]),e("tr",[e("td",{attrs:{width:"150"}},[t._v("sidebar-message-top")]),e("td",{attrs:{width:"350"}},[t._v("左侧最新消息列表的顶部，会随列表滚动")]),e("td",{attrs:{width:"150"}},[t._v("instance")])]),e("tr",[e("td",{attrs:{width:"150"}},[t._v("sidebar-contact-top")]),e("td",{attrs:{width:"350"}},[t._v("左侧联系人列表的顶部，会随列表滚动")]),e("td",{attrs:{width:"150"}},[t._v("instance")])]),e("tr",[e("td",{attrs:{width:"150"}},[t._v("sidebar-message-fixedtop")]),e("td",{attrs:{width:"350"}},[t._v("固定在左侧最新消息列表的顶部")]),e("td",{attrs:{width:"150"}},[t._v("instance")])]),e("tr",[e("td",{attrs:{width:"150"}},[t._v("sidebar-contact-fixedtop")]),e("td",{attrs:{width:"350"}},[t._v("固定在左侧联系人列表的顶部")]),e("td",{attrs:{width:"150"}},[t._v("instance")])]),e("tr",[e("td",{attrs:{width:"150"}},[t._v("contact-info")]),e("td",{attrs:{width:"350"}},[t._v("左侧联系人详细页")]),e("td",{attrs:{width:"150"}},[t._v("Contact")])]),e("tr",[e("td",{attrs:{width:"150"}},[t._v("message-side")]),e("td",{attrs:{width:"350"}},[t._v("消息列表右侧")]),e("td",{attrs:{width:"150"}},[t._v("Contact")])])])},function(){var t=this,e=t._self._c;return e("table",{staticClass:"table"},[e("tr",{staticClass:"table-head"},[e("th",[t._v("事件名")]),e("th",[t._v("说明")]),e("th",[t._v("参数")])]),e("tr",[e("td",{attrs:{width:"150"}},[t._v("change-menu")]),e("td",{attrs:{width:"350"}},[t._v("当左侧导航选项卡切换的时候会触发该事件")]),e("td",{attrs:{width:"150"}},[t._v("Menu.name")])]),e("tr",[e("td",{attrs:{width:"150"}},[t._v("menu-avatar-click")]),e("td",{attrs:{width:"350"}},[t._v("当左侧导航内的头像被点击时回触发该事件")]),e("td",{attrs:{width:"150"}},[t._v("Contact")])]),e("tr",[e("td",{attrs:{width:"150"}},[t._v("change-contact")]),e("td",{attrs:{width:"350"}},[t._v("当左侧联系人点击时会触发该事件")]),e("td",{attrs:{width:"150"}},[t._v("Contact")])]),e("tr",[e("td",{attrs:{width:"150"}},[t._v("pull-messages")]),e("td",{attrs:{width:"350"}},[t._v("\n 当切换聊天对象或者聊天窗口滚动到顶部时会触发该事件，调用next方法结束loading状态，如果设置了isEnd=true，下次聊天窗口滚动到顶部将不会再触发该事件\n ")]),e("td",{attrs:{width:"150"}},[t._v("Contact,next([Message],isEnd),instance")])]),e("tr",[e("td",{attrs:{width:"150"}},[t._v("message-click")]),e("td",{attrs:{width:"350"}},[t._v("点击聊天窗口中的消息时会触发该事件")]),e("td",{attrs:{width:"150"}},[t._v("event,key,Message,instance")])]),e("tr",[e("td",{attrs:{width:"150"}},[t._v("send")]),e("td",{attrs:{width:"350"}},[t._v("当发送新消息时会触发该事件")]),e("td",{attrs:{width:"150"}},[t._v("\n Message,Function(Message)：调用该函数完成消息发送，可以传入Message来改变消息内容，file：上传时的文件\n ")])]),e("tr",[e("td",{attrs:{width:"150"}},[t._v("is-buttom")]),e("td",{attrs:{width:"350"}},[t._v("监听聊天列表是否滚动到底部或者在底部")]),e("td",{attrs:{width:"150"}},[t._v("true or false")])])])},function(){var t=this,e=t._self._c;return e("p",[t._v("\n Lemon-IMUI\n 目前内置了file、image、text、event四种消息类型，在实际应用当中肯定是不够的哦，咋办？没事的，我们继续往下see。"),e("br"),t._v("要创建消息首先要确定新消息的\n Message 结构。\n ")])}],r=(n("8e6e"),n("ac6a"),n("456d"),n("2638")),o=n.n(r),c=n("ade3");n("6b54"),n("7f7f");function d(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(t);e&&(s=s.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,s)}return n}function l(t){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{};e%2?d(Object(n),!0).forEach((function(e){Object(c["a"])(t,e,n[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):d(Object(n)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))}))}return t}var u,h,m,v,p={name:"lemonMessageVoice",inheritAttrs:!1,inject:["IMUI"],render:function(){var t=arguments[0];return t("lemon-message-basic",o()([{class:"lemon-message-voice"},{props:l({},this.$attrs)},{scopedSlots:{content:function(e){return t("span",[e.content," 🔈"])}}}]))}},f=p,g=(n("68b9"),n("2877")),_=Object(g["a"])(f,u,h,!1,null,null,null),b=_.exports,w={id:1e3,avatar:"https://p.qqan.com/up/2018-4/15244505348390471.jpg",displayName:"野火。"},C=[{id:1,displayName:"像梦一样自由",avatar:"https://p.qqan.com/up/2020-2/2020022821001845128.jpg",index:"X",unread:0,lastSendTime:1566047865417,lastContent:"你开心吗"},{id:2,displayName:"梦醒时分、",avatar:"https://p.qqan.com/up/2021-1/20211301122243621.jpg",index:"M",unread:0,lastSendTime:1566047865417,lastContent:""},{id:3,displayName:"凌云",avatar:"https://p.qqan.com/up/2021-1/2021129102387841.jpg",index:"L",unread:0,lastSendTime:1566047865417,lastContent:""},{id:4,displayName:"小郭",avatar:"https://p.qqan.com/up/2021-1/2021122135507881.jpg",index:"X",unread:0,lastSendTime:1566047865417,lastContent:""},{id:5,displayName:"杨玉泉",avatar:"https://p.qqan.com/up/2021-1/20211211131598147.jpg",index:"Y",unread:0,lastSendTime:1566047865417,lastContent:""},{id:6,displayName:"森系Style",avatar:"https://p.qqan.com/up/2021-1/2021113104111220.jpg",index:"S",unread:0,lastSendTime:1566047865417,lastContent:""},{id:7,displayName:"霸王花",avatar:"https://p.qqan.com/up/2021-1/20211411391666.jpg",index:"B",unread:0,lastSendTime:1566047865417,lastContent:"你怎么还不睡呀？"},{id:8,displayName:"曾平",avatar:"https://p.qqan.com/up/2020-12/202012291044425822.jpg",index:"Z",unread:0,lastSendTime:1566047865417,lastContent:""},{id:9,displayName:"淡然",avatar:"https://p.qqan.com/up/2020-12/202012141813343503.jpg",index:"D",unread:0,lastSendTime:1566047865417,lastContent:""},{id:10,displayName:"叶子。",avatar:"https://p.qqan.com/up/2021-1/20211301122243621.jpg",index:"Y",unread:0,lastSendTime:1566047865417,lastContent:""},{id:11,displayName:"土豆",avatar:"https://p.qqan.com/up/2020-12/202012111157268739.jpg",index:"T",unread:0,lastSendTime:1566047865417,lastContent:""},{id:12,displayName:"清沫",avatar:"https://p.qqan.com/up/2020-12/202012415467996.jpg",index:"Q",unread:0,lastSendTime:1566047865417,lastContent:""},{id:13,displayName:"Lemon-imui交流群",avatar:"https://p.qqan.com/up/2020-11/20201127157109035.jpg",index:"L",isGroup:!0,unread:0,lastSendTime:1566047865417,lastContent:"这个咋处理啊？"},{id:14,displayName:"系统通知",avatar:"https://p.qqan.com/up/2020-6/2020061117234279854.jpg",index:"[1]系統通知",unread:0,lastSendTime:1566047865417,lastContent:"宁静致远通过了你的好友请求",renderContainer:function(){var t=this.$createElement;return t("div",{style:"padding:15px;"},[t("div",["宁静致远通过了你的好友请求"]),t("div",["宁静致远通过了你的好友请求"]),t("div",["宁静致远通过了你的好友请求"])])}},{id:15,displayName:"宁静致远。",avatar:"https://p.qqan.com/up/2020-6/2020060308522797777.jpg",index:"N",unread:0,lastSendTime:1566047865417,lastContent:""}],y=(n("7514"),function(){return Math.random().toString(36).substr(-8)}),x=function(t){var e=C.find((function(e){return e.id==t}));return{id:e.id,avatar:e.avatar,displayName:e.displayName}},j={1:[{id:y(),status:"succeed",type:"text",sendTime:1566047865417,content:"问你件事",toContactId:1,fromUser:w},{id:y(),status:"succeed",type:"text",sendTime:1566047865417,content:"啥子。",toContactId:1,fromUser:x(1)},{id:y(),status:"succeed",type:"text",sendTime:1566047865417,content:"为什么",toContactId:1,fromUser:w},{id:y(),status:"succeed",type:"text",sendTime:1566047865417,content:"你穿了高跟鞋还这么矮",toContactId:1,fromUser:w},{id:y(),status:"succeed",type:"text",sendTime:1566047865417,content:"因为我矮啊。[!1f600][!1f600][!1f600]",toContactId:1,fromUser:x(1)},{id:y(),status:"succeed",type:"text",sendTime:1566047865417,content:"你开心吗",toContactId:1,fromUser:x(1)}],2:[],3:[],4:[],5:[],6:[],7:[],8:[],9:[],10:[],11:[],12:[],13:[{id:y(),status:"succeed",type:"text",sendTime:1566047865417,content:"我是测试时候看到的",toContactId:1,fromUser:x(4)},{id:y(),status:"succeed",type:"text",sendTime:1566047865417,content:"上新版本了，玩玩",toContactId:1,fromUser:x(4)},{id:y(),status:"succeed",type:"text",sendTime:1566047865417,content:"项目内没有搞这个",toContactId:1,fromUser:x(4)},{id:y(),status:"succeed",type:"text",sendTime:1566047865417,content:"@awesome 最新的，不然哪有这功能",toContactId:1,fromUser:x(5)},{id:y(),status:"succeed",type:"text",sendTime:1566047865417,content:"其实是跟你的遮罩层有冲突",toContactId:1,fromUser:x(4)},{id:y(),status:"succeed",type:"text",sendTime:1566047865417,content:"自己修改index哈",toContactId:1,fromUser:w},{id:y(),status:"succeed",type:"text",sendTime:1566047865417,content:"你们升级到最近版了吗？",toContactId:1,fromUser:x(6)},{id:y(),status:"succeed",type:"text",sendTime:1566047865417,content:"wo 现在用的142",toContactId:1,fromUser:x(7)}],14:[],15:[]},I=[{label:"表情",children:[{name:"1f600",title:"微笑",src:"https://cdn.jsdelivr.net/gh/twitter/twemoji@v14.0.2/assets/72x72/1f600.png"},{name:"1f62c",title:"微笑",src:"https://cdn.jsdelivr.net/gh/twitter/twemoji@v14.0.2/assets/72x72/1f62c.png"},{name:"1f601",title:"微笑",src:"https://cdn.jsdelivr.net/gh/twitter/twemoji@v14.0.2/assets/72x72/1f601.png"},{name:"1f602",title:"微笑",src:"https://cdn.jsdelivr.net/gh/twitter/twemoji@v14.0.2/assets/72x72/1f602.png"},{name:"1f923",title:"微笑",src:"https://cdn.jsdelivr.net/gh/twitter/twemoji@v14.0.2/assets/72x72/1f923.png"},{name:"1f973",title:"微笑",src:"https://cdn.jsdelivr.net/gh/twitter/twemoji@v14.0.2/assets/72x72/1f973.png"},{name:"1f603",title:"微笑",src:"https://cdn.jsdelivr.net/gh/twitter/twemoji@v14.0.2/assets/72x72/1f603.png"},{name:"1f604",title:"微笑",src:"https://cdn.jsdelivr.net/gh/twitter/twemoji@v14.0.2/assets/72x72/1f604.png"},{name:"1f605",title:"微笑",src:"https://cdn.jsdelivr.net/gh/twitter/twemoji@v14.0.2/assets/72x72/1f605.png"},{name:"1f606",title:"微笑",src:"https://cdn.jsdelivr.net/gh/twitter/twemoji@v14.0.2/assets/72x72/1f606.png"},{name:"1f607",title:"微笑",src:"https://cdn.jsdelivr.net/gh/twitter/twemoji@v14.0.2/assets/72x72/1f607.png"},{name:"1f609",title:"微笑",src:"https://cdn.jsdelivr.net/gh/twitter/twemoji@v14.0.2/assets/72x72/1f609.png"},{name:"1f60a",title:"微笑",src:"https://cdn.jsdelivr.net/gh/twitter/twemoji@v14.0.2/assets/72x72/1f60a.png"},{name:"1f642",title:"微笑",src:"https://cdn.jsdelivr.net/gh/twitter/twemoji@v14.0.2/assets/72x72/1f642.png"},{name:"1f643",title:"微笑",src:"https://cdn.jsdelivr.net/gh/twitter/twemoji@v14.0.2/assets/72x72/1f643.png"},{name:"1263a",title:"微笑",src:"https://cdn.jsdelivr.net/gh/twitter/twemoji@v14.0.2/assets/72x72/263a.png"},{name:"1f60b",title:"微笑",src:"https://cdn.jsdelivr.net/gh/twitter/twemoji@v14.0.2/assets/72x72/1f60b.png"},{name:"1f60c",title:"微笑",src:"https://cdn.jsdelivr.net/gh/twitter/twemoji@v14.0.2/assets/72x72/1f60c.png"},{name:"1f60d",title:"微笑",src:"https://cdn.jsdelivr.net/gh/twitter/twemoji@v14.0.2/assets/72x72/1f60d.png"},{name:"1f970",title:"微笑",src:"https://cdn.jsdelivr.net/gh/twitter/twemoji@v14.0.2/assets/72x72/1f970.png"},{name:"1f618",title:"微笑",src:"https://cdn.jsdelivr.net/gh/twitter/twemoji@v14.0.2/assets/72x72/1f618.png"},{name:"1f617",title:"微笑",src:"https://cdn.jsdelivr.net/gh/twitter/twemoji@v14.0.2/assets/72x72/1f617.png"},{name:"1f619",title:"微笑",src:"https://cdn.jsdelivr.net/gh/twitter/twemoji@v14.0.2/assets/72x72/1f619.png"},{name:"1f61a",title:"微笑",src:"https://cdn.jsdelivr.net/gh/twitter/twemoji@v14.0.2/assets/72x72/1f61a.png"},{name:"1f61c",title:"微笑",src:"https://cdn.jsdelivr.net/gh/twitter/twemoji@v14.0.2/assets/72x72/1f61c.png"},{name:"1f92a",title:"微笑",src:"https://cdn.jsdelivr.net/gh/twitter/twemoji@v14.0.2/assets/72x72/1f92a.png"},{name:"1f928",title:"微笑",src:"https://cdn.jsdelivr.net/gh/twitter/twemoji@v14.0.2/assets/72x72/1f928.png"},{name:"1f9d0",title:"微笑",src:"https://cdn.jsdelivr.net/gh/twitter/twemoji@v14.0.2/assets/72x72/1f9d0.png"},{name:"1f61d",title:"微笑",src:"https://cdn.jsdelivr.net/gh/twitter/twemoji@v14.0.2/assets/72x72/1f61d.png"},{name:"1f61b",title:"微笑",src:"https://cdn.jsdelivr.net/gh/twitter/twemoji@v14.0.2/assets/72x72/1f61b.png"},{name:"1f911",title:"微笑",src:"https://cdn.jsdelivr.net/gh/twitter/twemoji@v14.0.2/assets/72x72/1f911.png"},{name:"1f913",title:"微笑",src:"https://cdn.jsdelivr.net/gh/twitter/twemoji@v14.0.2/assets/72x72/1f913.png"},{name:"1f60e",title:"微笑",src:"https://cdn.jsdelivr.net/gh/twitter/twemoji@v14.0.2/assets/72x72/1f60e.png"},{name:"1f929",title:"微笑",src:"https://cdn.jsdelivr.net/gh/twitter/twemoji@v14.0.2/assets/72x72/1f929.png"},{name:"1f921",title:"微笑",src:"https://cdn.jsdelivr.net/gh/twitter/twemoji@v14.0.2/assets/72x72/1f921.png"},{name:"1f920",title:"微笑",src:"https://cdn.jsdelivr.net/gh/twitter/twemoji@v14.0.2/assets/72x72/1f920.png"},{name:"1f917",title:"微笑",src:"https://cdn.jsdelivr.net/gh/twitter/twemoji@v14.0.2/assets/72x72/1f917.png"},{name:"1f60f",title:"微笑",src:"https://cdn.jsdelivr.net/gh/twitter/twemoji@v14.0.2/assets/72x72/1f60f.png"},{name:"1f636",title:"微笑",src:"https://cdn.jsdelivr.net/gh/twitter/twemoji@v14.0.2/assets/72x72/1f636.png"},{name:"1f610",title:"微笑",src:"https://cdn.jsdelivr.net/gh/twitter/twemoji@v14.0.2/assets/72x72/1f610.png"},{name:"1f611",title:"微笑",src:"https://cdn.jsdelivr.net/gh/twitter/twemoji@v14.0.2/assets/72x72/1f611.png"},{name:"1f612",title:"微笑",src:"https://cdn.jsdelivr.net/gh/twitter/twemoji@v14.0.2/assets/72x72/1f612.png"},{name:"1f644",title:"微笑",src:"https://cdn.jsdelivr.net/gh/twitter/twemoji@v14.0.2/assets/72x72/1f644.png"},{name:"1f914",title:"微笑",src:"https://cdn.jsdelivr.net/gh/twitter/twemoji@v14.0.2/assets/72x72/1f914.png"},{name:"1f925",title:"微笑",src:"https://cdn.jsdelivr.net/gh/twitter/twemoji@v14.0.2/assets/72x72/1f925.png"},{name:"1f92d",title:"微笑",src:"https://cdn.jsdelivr.net/gh/twitter/twemoji@v14.0.2/assets/72x72/1f92d.png"},{name:"1f92b",title:"微笑",src:"https://cdn.jsdelivr.net/gh/twitter/twemoji@v14.0.2/assets/72x72/1f92b.png"},{name:"1f92c",title:"微笑",src:"https://cdn.jsdelivr.net/gh/twitter/twemoji@v14.0.2/assets/72x72/1f92c.png"},{name:"1f92f",title:"微笑",src:"https://cdn.jsdelivr.net/gh/twitter/twemoji@v14.0.2/assets/72x72/1f92f.png"},{name:"1f633",title:"微笑",src:"https://cdn.jsdelivr.net/gh/twitter/twemoji@v14.0.2/assets/72x72/1f633.png"},{name:"1f61e",title:"微笑",src:"https://cdn.jsdelivr.net/gh/twitter/twemoji@v14.0.2/assets/72x72/1f61e.png"},{name:"1f61f",title:"微笑",src:"https://cdn.jsdelivr.net/gh/twitter/twemoji@v14.0.2/assets/72x72/1f61f.png"},{name:"1f620",title:"微笑",src:"https://cdn.jsdelivr.net/gh/twitter/twemoji@v14.0.2/assets/72x72/1f620.png"},{name:"1f621",title:"微笑",src:"https://cdn.jsdelivr.net/gh/twitter/twemoji@v14.0.2/assets/72x72/1f621.png"}]},{label:"收藏",children:[{name:"1f62c",title:"微笑",src:"https://cdn.jsdelivr.net/gh/twitter/twemoji@v14.0.2/assets/72x72/1f62c.png"},{name:"1f621",title:"微笑",src:"https://cdn.jsdelivr.net/gh/twitter/twemoji@v14.0.2/assets/72x72/1f621.png"}]}],M={name:"QqImui",components:{},data:function(){return{}},render:function(){var t=this,e=arguments[0];return e("div",{class:"qq-lemon-imui"},[e("lemon-imui",o()([{class:"lemon-slot",attrs:{user:w,width:900,"avatar-cricle":!0,"hide-message-name":!0,"hide-message-time":!0},ref:"IMUI"},{on:{"pull-messages":this.handlePullMessages,"change-contact":this.handleChangeContact,send:this.handleSend}},{scopedSlots:{"message-title":function(n){return e("div",[e("div",{style:"display:flex;justify-content:space-between"},[e("span",[n.displayName]),e("span",{style:"font-size:12px;"},[e("span",["打开抽屉："]),e("span",{class:"cursor:pointer;",on:{click:function(){return t.openDrawer("right")}}},["右侧 |"," "]),e("span",{class:"cursor:pointer;",on:{click:function(){return t.openDrawer("rightInside")}}},["右侧内部 |"," "]),e("span",{class:"cursor:pointer;",on:{click:function(){return t.openDrawer("center")}}},["居中"])])]),n.isGroup&&e("div",{class:"slot-group-menu"},[e("span",["聊天"]),e("span",["公告"]),e("span",["相册"]),e("span",["文件"]),e("span",["活动"]),e("span",{directives:[{name:"lemon-contextmenu",value:[{text:"操作一",click:function(t,e,n){n()}},{text:"操作二"}],modifiers:{click:!0}}]},["设置(左键弹出菜单)"])])])},"sidebar-contact-fixedtop":function(t){return e("div",{class:"slot-contact-fixedtop"},[e("input",{class:"slot-search",attrs:{placeholder:"搜索通讯录"}})])},"message-side":function(t){if(t.isGroup)return e("div",{class:"slot-group"},[e("div",{class:"slot-group-title"},["群通知"]),e("div",{class:"slot-group-notice"},["进群请改备注，格式，工作地点-姓名，请大家配合谢谢"]),e("div",{class:"slot-group-title"},["群成员"]),e("div",{class:"slot-group-panel"},[e("input",{class:"slot-search",attrs:{placeholder:"搜索群成员"}}),e("div",{class:"slot-group-member"},["河南-96-十里青山"]),e("div",{class:"slot-group-member"},["河南-96-十里青山"]),e("div",{class:"slot-group-member"},["河南-96-十里青山"]),e("div",{class:"slot-group-member"},["河南-96-十里青山"]),e("div",{class:"slot-group-member"},["河南-96-十里青山"]),e("div",{class:"slot-group-member"},["河南-96-十里青山"]),e("div",{class:"slot-group-member"},["河南-96-十里青山"]),e("div",{class:"slot-group-member"},["河南-96-十里青山"]),e("div",{class:"slot-group-member"},["河南-96-十里青山"]),e("div",{class:"slot-group-member"},["河南-96-十里青山"])])])}}}]))])},computed:{},watch:{},created:function(){},mounted:function(){var t=this.$refs.IMUI;t.initContacts(C),t.initEmoji(I),t.changeContact(13)},methods:{openDrawer:function(t){var e=this.$createElement,n=this.$refs.IMUI,s={position:t,render:function(t){return e("div",{style:"padding:15px"},[e("h5",[t.displayName]),e("span",{on:{click:n.closeDrawer}},["关闭抽屉"])])}};"center"==t?(s.width="50%",s.height="50%"):"rightInside"==t&&(s.height="90%",s.offsetY="10%"),n.openDrawer(s)},handlePullMessages:function(t,e){this.$refs.IMUI;setTimeout((function(){e(j[t.id],!0)}),3e3)},handleChangeContact:function(){},handleSend:function(t,e,n){console.log(t,e,n),setTimeout((function(){e()}),1e3)}}},S=M,k=(n("41d3"),Object(g["a"])(S,m,v,!1,null,null,null)),O=k.exports,T=n("9224");function $(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(t);e&&(s=s.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,s)}return n}function U(t){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{};e%2?$(Object(n),!0).forEach((function(e){Object(c["a"])(t,e,n[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):$(Object(n)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))}))}return t}s["a"].component(b.name,b),s["a"].component(O.name,O);var D='export default {\n //组件的name必须以lemonMessage开头，后面跟上 Message.type\n name: "lemonMessageVoice",\n inheritAttrs: false,\n //如果需要使用父组件的方法，可以使用注入。\n inject: ["IMUI"],\n render() {\n //lemon-message-basic 组件对气泡框、头像、事件等信息进行了公共的处理。\n return (\n <lemon-message-basic\n class="lemon-message-voice"\n props={{ ...this.$attrs }}\n scopedSlots={{\n content: props => {\n //返回HTML结构\n return <span>{props.content} 🔈</span>\n }\n }}\n />\n );\n }\n};\n<style lang="stylus">\n.lemon-message.lemon-message-voice\n user-select none\n .lemon-message__content\n border 2px solid #000\n font-size 12px\n cursor pointer\n &::before\n display none\n</style>',N=function(){return(new Date).getTime()},E=function(){return Math.random().toString(36).substr(-8)},F=function(){return Math.random().toString(36).substr(2)},P=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"",e=arguments.length>1?arguments[1]:void 0;return e||(e={id:"system",displayName:"系统测试",avatar:"http://upload.qqbodys.com/allimg/1710/1035512943-0.jpg"}),{id:E(),status:"succeed",type:"text",sendTime:N(),content:F(),toContactId:t,fromUser:e}},L={name:"app",data:function(){var t=this,e=this.$createElement;return{theme:"default",contactContextmenu:[{text:"删除该聊天",click:function(t,e,n){var s=e.IMUI,i=e.contact;s.updateContact({id:i.id,lastContent:null}),s.currentContactId==i.id&&s.changeContact(null),n()}},{text:"设置备注和标签"},{text:"投诉"},{icon:"lemon-icon-message",render:function(t,e,n){return t("div",{style:"display:flex;justify-content:space-between;align-items:center;width:130px"},[t("span",["加入黑名单"]),t("span",[t("input",{attrs:{type:"checkbox",id:"switch"}}),t("label",{attrs:{id:"switch-label",for:"switch"}},["Toggle"])])])}},{click:function(t,e,n){var s=e.IMUI,i=e.contact;s.removeContact(i.id),s.currentContactId==i.id&&s.changeContact(null),n()},color:"red",text:"删除好友"}],contextmenu:[{click:function(t,n,s){var i=n.IMUI,a=n.message,r={id:E(),type:"event",content:e("div",[e("span",["你撤回了一条消息"," ",e("span",{directives:[{name:"show",value:"text"==a.type}],style:"color:#333;cursor:pointer",attrs:{content:a.content},on:{click:function(t){i.setEditorValue(t.target.getAttribute("content"))}}},["重新编辑"])])]),toContactId:a.toContactId,sendTime:N()};i.removeMessage(a.id),i.appendMessage(r,!0),s()},visible:function(e){return e.message.fromUser.id==t.user.id},text:"撤回消息"},{visible:function(e){return e.message.fromUser.id!=t.user.id},text:"举报"},{text:"转发"},{visible:function(t){return"text"==t.message.type},text:"复制文字"},{visible:function(t){return"image"==t.message.type},text:"下载图片"},{visible:function(t){return"file"==t.message.type},text:"下载文件"},{click:function(t,e,n){var s=e.IMUI,i=e.message;s.setUserTag(i.fromUser),n()},text:"@TA"},{click:function(t,e,n){var s=e.IMUI,i=e.message;s.removeMessage(i.id),n()},icon:"lemon-icon-folder",color:"red",text:"删除"}],tip:D,packageData:T,hideMenuAvatar:!1,hideMenu:!1,hideMessageName:!1,hideMessageTime:!0,user:{id:"1",displayName:"June",avatar:"https://p.qqan.com/up/2021-1/20211211131598147.jpg"}}},mounted:function(){var t=this.$createElement,e={id:"contact-1",displayName:"工作协作群",avatar:"https://p.qqan.com/up/2020-2/2020022821001845128.jpg",index:"[1]群组",unread:0,lastSendTime:1566047865417,lastContent:"2"},n={id:"contact-2",displayName:"自定义内容",avatar:"https://p.qqan.com/up/2021-1/20211301122243621.jpg",click:function(t){t()},renderContainer:function(){return t("h1",{style:"text-indent:20px"},["自定义页面"])},lastSendTime:1345209465e3,lastContent:"12312",unread:2},s={id:"contact-3",displayName:"铁牛",avatar:"https://p.qqan.com/up/2021-1/2021129102387841.jpg",index:"T",unread:32,lastSendTime:3,lastContent:"你好123"},i={id:"contact-4",displayName:"如花",avatar:"https://p.qqan.com/up/2021-1/2021122135507881.jpg",index:"",unread:1,lastSendTime:3,lastContent:"吃饭了嘛"},a=this.$refs.IMUI;setTimeout((function(){a.changeContact("contact-1")}),500),a.setLastContentRender("event",(function(t){return"[自定义通知内容]"}));var r=[U({},e),U({},n),U({},s),U({},i)];a.initContacts(r),a.initMenus([{name:"messages"},{name:"contacts"},{name:"custom1",title:"自定义按钮1",unread:0,render:function(e){return t("i",{class:"lemon-icon-attah"})},renderContainer:function(){return t("div",{class:"article"},[t("ul",[t("li",{class:"article-item"},[t("h2",["人民日报谈网红带货：产品真的值得买吗？"])]),t("li",{class:"article-item"},["甘肃夏河县发生5.7级地震 暂未接到人员伤亡报告"]),t("li",{class:"article-