UPDATE

examples/App.vue

@@ -10,6 +10,7 @@
         @change-contact="handleChangeContact"
         @pull-messages="handlePullMessages"
         @message-click="handleMessageClick"
+        @menu-avatar-click="handleMenuAvatarClick"
         @send="handleSend"
       >
         <template #cover>
@@ -499,6 +500,9 @@ export default {
     ]);
   },
   methods: {
+    handleMenuAvatarClick() {
+      console.log("Event:menu-avatar-click");
+    },
     handleMessageClick(e, key, message) {
       const { IMUI } = this.$refs;
 

examples/dist/index.html

@@ -1 +1 @@
-<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel=icon href=favicon.ico><title>Lemon-IMUI</title><link href=css/index.e7f71477.css rel=preload as=style><link href=js/chunk-vendors.e4810482.js rel=preload as=script><link href=js/index.f29ec4b1.js rel=preload as=script><link href=css/index.e7f71477.css rel=stylesheet></head><body><noscript><strong>We're sorry but flat-im doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=js/chunk-vendors.e4810482.js></script><script src=js/index.f29ec4b1.js></script></body></html>
+<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel=icon href=favicon.ico><title>Lemon-IMUI</title><link href=css/index.e7f71477.css rel=preload as=style><link href=js/chunk-vendors.e4810482.js rel=preload as=script><link href=js/index.5df9a85c.js rel=preload as=script><link href=css/index.e7f71477.css rel=stylesheet></head><body><noscript><strong>We're sorry but flat-im doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=js/chunk-vendors.e4810482.js></script><script src=js/index.5df9a85c.js></script></body></html>

examples/dist/js/index.5df9a85c.js

@@ -0,0 +1 @@
+(function(e){function t(t){for(var i,s,o=t[0],c=t[1],l=t[2],d=0,m=[];d<o.length;d++)s=o[d],a[s]&&m.push(a[s][0]),a[s]=0;for(i in c)Object.prototype.hasOwnProperty.call(c,i)&&(e[i]=c[i]);u&&u(t);while(m.length)m.shift()();return r.push.apply(r,l||[]),n()}function n(){for(var e,t=0;t<r.length;t++){for(var n=r[t],i=!0,o=1;o<n.length;o++){var c=n[o];0!==a[c]&&(i=!1)}i&&(r.splice(t--,1),e=s(s.s=n[0]))}return e}var i={},a={index:0},r=[];function s(t){if(i[t])return i[t].exports;var n=i[t]={i:t,l:!1,exports:{}};return e[t].call(n.exports,n,n.exports,s),n.l=!0,n.exports}s.m=e,s.c=i,s.d=function(e,t,n){s.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},s.r=function(e){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},s.t=function(e,t){if(1&t&&(e=s(e)),8&t)return e;if(4&t&&"object"===typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(s.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var i in e)s.d(n,i,function(t){return e[t]}.bind(null,i));return n},s.n=function(e){var t=e&&e.__esModule?function(){return e["default"]}:function(){return e};return s.d(t,"a",t),t},s.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},s.p="";var o=window["webpackJsonp"]=window["webpackJsonp"]||[],c=o.push.bind(o);o.push=t,o=o.slice();for(var l=0;l<o.length;l++)t(o[l]);var u=c;r.push([0,"chunk-vendors"]),n()})({0:function(e,t,n){e.exports=n("c31f")},"04f4":function(e,t,n){"use strict";var i=n("26f7"),a=n.n(i);a.a},"0af2":function(e,t,n){},"0e15":function(e,t,n){"use strict";var i=n("9768"),a=n.n(i);a.a},1021:function(e,t,n){},"107a":function(e,t,n){},"15cf":function(e,t,n){},1663:function(e,t,n){"use strict";var i=n("e86c"),a=n.n(i);a.a},"1e45":function(e,t,n){"use strict";var i=n("83d7"),a=n.n(i);a.a},"26f7":function(e,t,n){},"2ec9":function(e,t){},3423:function(e,t,n){"use strict";var i=n("107a"),a=n.n(i);a.a},"436f":function(e,t,n){"use strict";var i=n("0af2"),a=n.n(i);a.a},"49c2":function(e,t,n){"use strict";var i=n("acce"),a=n.n(i);a.a},"4d21":function(e,t,n){"use strict";var i=n("917b"),a=n.n(i);a.a},"6a2b":function(e,t,n){},"6da9":function(e,t,n){},7802:function(e,t,n){},"820e":function(e,t,n){},"83d7":function(e,t,n){},"909e":function(e,t,n){"use strict";var i=n("1021"),a=n.n(i);a.a},"917b":function(e,t,n){},9768:function(e,t,n){},9800:function(e,t,n){},"9b01":function(e,t,n){"use strict";var i=n("6da9"),a=n.n(i);a.a},"9c9b":function(e,t,n){"use strict";var i=n("9800"),a=n.n(i);a.a},a215:function(e,t,n){},acce:function(e,t,n){},c31f:function(e,t,n){"use strict";n.r(t);n("cadf"),n("551c"),n("f751"),n("097d");var i=n("2b0e"),a=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{attrs:{id:"app"}},[n("div",{staticClass:"imui-center"},[n("lemon-imui",{ref:"IMUI",attrs:{user:e.user,"hide-menu":e.hideMenu,"hide-menu-avatar":e.hideMenuAvatar},on:{"change-menu":e.handleChangeMenu,"change-contact":e.handleChangeContact,"pull-messages":e.handlePullMessages,"message-click":e.handleMessageClick,"menu-avatar-click":e.handleMenuAvatarClick,send:e.handleSend},scopedSlots:e._u([{key:"cover",fn:function(){return[n("div",{staticClass:"cover"},[n("i",{staticClass:"lemon-icon-message"}),n("p",[n("b",[e._v("Lemon")]),e._v(" IMUI")])])]},proxy:!0},{key:"contact-title",fn:function(t){return[n("span",[e._v(e._s(t.displayName))]),n("small",{staticClass:"more",on:{click:function(n){return e.changeDrawer(t)}}},[e._v("…")])]}},{key:"contact-info",fn:function(t){return[e._v("\n        自定义联系人信息 "+e._s(t.displayName)+"\n      ")]}},{key:"message-sidebar",fn:function(){return[n("div",{staticClass:"bar"},[e._v("自定义消息顶部")])]},proxy:!0},{key:"contact-sidebar",fn:function(){return[n("div",{staticClass:"bar"},[e._v("自定义联系人顶部")])]},proxy:!0}])}),n("div",{staticClass:"action"},[n("lemon-button",{on:{click:e.appendMessage}},[e._v("发送消息")]),n("lemon-button",{on:{click:e.updateContact}},[e._v("修改联系人信息")]),n("lemon-button",{on:{click:e.changeMenuVisible}},[e._v("切换导航显示")]),n("lemon-button",{on:{click:e.changeMenuAvatarVisible}},[e._v("切换头像显示")])],1)],1)])},r=[],s=(n("8e6e"),n("ac6a"),n("456d"),n("2638")),o=n.n(s),c=n("bd86");n("6b54");function l(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);t&&(i=i.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),n.push.apply(n,i)}return n}function u(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?l(n,!0).forEach(function(t){Object(c["a"])(e,t,n[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):l(n).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))})}return e}var d,m,f,h,p,g,v,b,x,_,y=function(){return(new Date).getTime()},w=function(){return 
Line truncated

examples/dist/js/index.f29ec4b1.js

@@ -1 +0,0 @@
-(function(e){function t(t){for(var i,s,o=t[0],c=t[1],l=t[2],d=0,m=[];d<o.length;d++)s=o[d],a[s]&&m.push(a[s][0]),a[s]=0;for(i in c)Object.prototype.hasOwnProperty.call(c,i)&&(e[i]=c[i]);u&&u(t);while(m.length)m.shift()();return r.push.apply(r,l||[]),n()}function n(){for(var e,t=0;t<r.length;t++){for(var n=r[t],i=!0,o=1;o<n.length;o++){var c=n[o];0!==a[c]&&(i=!1)}i&&(r.splice(t--,1),e=s(s.s=n[0]))}return e}var i={},a={index:0},r=[];function s(t){if(i[t])return i[t].exports;var n=i[t]={i:t,l:!1,exports:{}};return e[t].call(n.exports,n,n.exports,s),n.l=!0,n.exports}s.m=e,s.c=i,s.d=function(e,t,n){s.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},s.r=function(e){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},s.t=function(e,t){if(1&t&&(e=s(e)),8&t)return e;if(4&t&&"object"===typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(s.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var i in e)s.d(n,i,function(t){return e[t]}.bind(null,i));return n},s.n=function(e){var t=e&&e.__esModule?function(){return e["default"]}:function(){return e};return s.d(t,"a",t),t},s.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},s.p="";var o=window["webpackJsonp"]=window["webpackJsonp"]||[],c=o.push.bind(o);o.push=t,o=o.slice();for(var l=0;l<o.length;l++)t(o[l]);var u=c;r.push([0,"chunk-vendors"]),n()})({0:function(e,t,n){e.exports=n("c31f")},"04f4":function(e,t,n){"use strict";var i=n("26f7"),a=n.n(i);a.a},"0af2":function(e,t,n){},"0e15":function(e,t,n){"use strict";var i=n("9768"),a=n.n(i);a.a},1021:function(e,t,n){},"107a":function(e,t,n){},"15cf":function(e,t,n){},1663:function(e,t,n){"use strict";var i=n("e86c"),a=n.n(i);a.a},"1e45":function(e,t,n){"use strict";var i=n("83d7"),a=n.n(i);a.a},"26f7":function(e,t,n){},"2ec9":function(e,t){},3423:function(e,t,n){"use strict";var i=n("107a"),a=n.n(i);a.a},"436f":function(e,t,n){"use strict";var i=n("0af2"),a=n.n(i);a.a},"49c2":function(e,t,n){"use strict";var i=n("acce"),a=n.n(i);a.a},"4d21":function(e,t,n){"use strict";var i=n("917b"),a=n.n(i);a.a},"6a2b":function(e,t,n){},"6da9":function(e,t,n){},7802:function(e,t,n){},"820e":function(e,t,n){},"83d7":function(e,t,n){},"909e":function(e,t,n){"use strict";var i=n("1021"),a=n.n(i);a.a},"917b":function(e,t,n){},9768:function(e,t,n){},9800:function(e,t,n){},"9b01":function(e,t,n){"use strict";var i=n("6da9"),a=n.n(i);a.a},"9c9b":function(e,t,n){"use strict";var i=n("9800"),a=n.n(i);a.a},a215:function(e,t,n){},acce:function(e,t,n){},c31f:function(e,t,n){"use strict";n.r(t);n("cadf"),n("551c"),n("f751"),n("097d");var i=n("2b0e"),a=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{attrs:{id:"app"}},[n("div",{staticClass:"imui-center"},[n("lemon-imui",{ref:"IMUI",attrs:{user:e.user,"hide-menu":e.hideMenu,"hide-menu-avatar":e.hideMenuAvatar},on:{"change-menu":e.handleChangeMenu,"change-contact":e.handleChangeContact,"pull-messages":e.handlePullMessages,"message-click":e.handleMessageClick,send:e.handleSend},scopedSlots:e._u([{key:"cover",fn:function(){return[n("div",{staticClass:"cover"},[n("i",{staticClass:"lemon-icon-message"}),n("p",[n("b",[e._v("Lemon")]),e._v(" IMUI")])])]},proxy:!0},{key:"contact-title",fn:function(t){return[n("span",[e._v(e._s(t.displayName))]),n("small",{staticClass:"more",on:{click:function(n){return e.changeDrawer(t)}}},[e._v("…")])]}},{key:"contact-info",fn:function(t){return[e._v("\n        自定义联系人信息 "+e._s(t.displayName)+"\n      ")]}},{key:"message-sidebar",fn:function(){return[n("div",{staticClass:"bar"},[e._v("自定义消息顶部")])]},proxy:!0},{key:"contact-sidebar",fn:function(){return[n("div",{staticClass:"bar"},[e._v("自定义联系人顶部")])]},proxy:!0}])}),n("div",{staticClass:"action"},[n("lemon-button",{on:{click:e.appendMessage}},[e._v("发送消息")]),n("lemon-button",{on:{click:e.updateContact}},[e._v("修改联系人信息")]),n("lemon-button",{on:{click:e.changeMenuVisible}},[e._v("切换导航显示")]),n("lemon-button",{on:{click:e.changeMenuAvatarVisible}},[e._v("切换头像显示")])],1)],1)])},r=[],s=(n("8e6e"),n("ac6a"),n("456d"),n("2638")),o=n.n(s),c=n("bd86");n("6b54");function l(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);t&&(i=i.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),n.push.apply(n,i)}return n}function u(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?l(n,!0).forEach(function(t){Object(c["a"])(e,t,n[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):l(n).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))})}return e}var d,m,f,h,p,g,v,b,x,_,y=function(){return(new Date).getTime()},w=function(){return Math.random().toString(36).substr(-8)},j=funLine truncated

packages/components/index.vue

@@ -235,7 +235,7 @@ export default {
             <lemon-avatar
               v-show={!this.hideMenuAvatar}
               on-click={e => {
-                console.log("menu avatar click");
+                this.$emit("menu-avatar-click", e);
               }}
               class="lemon-menu__avatar"
               src={this.user.avatar}
@@ -557,7 +557,7 @@ export default {
           messages[contactId][index],
           data
         );
-        console.log('--------',messages[contactId][index]);
+        console.log("--------", messages[contactId][index]);
         this.forceUpdateMessage(messageId);
       }
     },
@@ -590,8 +590,8 @@ export default {
     changeMenu(name) {
       this.$emit("change-menu", name);
       this.activeSidebar = name;
-      const { renderContainer } = this.currentMenu;
-      this._customContainerReady(renderContainer, CacheMenuContainer, name);
+      // const { renderContainer } = this.currentMenu;
+      // this._customContainerReady(renderContainer, CacheMenuContainer, name);
     },
     /**
      * 初始化编辑框的 Emoji 表情列表，是 Lemon-editor.initEmoji 的代理方法
@@ -648,11 +648,21 @@ export default {
               ...{ renderContainer: null }
             };
           }
+
+          if (item.renderContainer) {
+            this._customContainerReady(
+              item.renderContainer,
+              CacheMenuContainer,
+              item.name
+            );
+          }
+
           return item;
         });
       } else {
         menus = defaultMenus;
       }
+
       this.menus = menus;
     },
     /**