UPDATE

examples/App.vue

@@ -1,8 +1,8 @@
 <template>
   <div id="app">
+    <div class="imui-center">
       <lemon-imui
         :user="user"
-      class="imui-center"
         ref="IMUI"
         @change-menu="handleChangeMenu"
         @change-contact="handleChangeContact"
@@ -26,10 +26,53 @@
           <small class="more" @click="changeDrawer(contact)">&#8230;</small>
         </template>
       </lemon-imui>
+
+      <div class="action">
+        <lemon-button @click="currentAppendMessage"
+          >在当前窗口发送消息</lemon-button
+        >
+        <lemon-button @click="appendMessage">指定联系人发送消息</lemon-button>
+        <lemon-button @click="updateContact">修改联系人信息</lemon-button>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
+const getTime = () => {
+  return new Date().getTime();
+};
+const generateRandId = () => {
+  return Number(
+    Math.random()
+      .toString()
+      .substr(3, length) + Date.now()
+  ).toString(36);
+};
+const generateRandWord = () => {
+  return Math.random()
+    .toString(36)
+    .substr(2);
+};
+const generateMessage = () => {
+  return {
+    id: generateRandId(),
+    status: "succeed",
+    type: "text",
+    sendTime: getTime(),
+    content: "随机回复：" + generateRandWord(),
+    toContactId: "123",
+    //fileSize: 1231,
+    //fileName: "asdasd.doc",
+    fromUser: {
+      id: "222",
+      displayName: "系统测试",
+      avatar:
+        "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1820523987,3798556096&fm=26&gp=0.jpg"
+    }
+  };
+};
+
 export default {
   name: "app",
   data() {
@@ -56,7 +99,7 @@ export default {
     };
     const contactData2 = {
       id: "2",
-      displayName: "马林",
+      displayName: "狗蛋Li。",
       avatar: "https://img.ivsky.com/img/tupian/li/201902/27/yanjing_meinv.jpg",
       type: "single",
       index: "B",
@@ -72,12 +115,14 @@ export default {
     };
     const contactData3 = {
       id: "3",
-      displayName: "范君",
+      displayName: "铁牛",
       avatar:
         "https://img.ivsky.com/img/tupian/li/201903/21/huahuan_xiaonvhai.jpg",
       type: "many",
       index: "C",
-      lastSendTime: 3
+      unread: 32,
+      lastSendTime: 3,
+      lastContent: "你好123"
     };
 
     const { IMUI } = this.$refs;
@@ -117,6 +162,25 @@ export default {
     ];
 
     IMUI.initContacts(data);
+    IMUI.initMenus([
+      {
+        name: "lastMessages"
+      },
+      {
+        name: "contacts"
+      },
+      {
+        title: "自定义按钮",
+        unread: 0,
+        click: () => {
+          alert("点击了自定义按钮");
+        },
+        render: menu => {
+          return <span>T</span>;
+        },
+        isBottom: true
+      }
+    ]);
     IMUI.initEmoji([
       {
         label: "表情",
@@ -403,23 +467,53 @@ export default {
         ]
       }
     ]);
-
-    setTimeout(() => {
-      IMUI.updateContact("3", {
-        unread: 100,
-        //displayName: "123",
-        lastSendTime: 3,
-        lastContent: "你好123"
-      });
-    }, 2000);
   },
   methods: {
+    _addUnread(id, message) {
+      const { IMUI } = this.$refs;
+      IMUI.updateContact(id, {
+        unread: "+1",
+        lastSendTime: getTime(),
+        lastContent: IMUI.lastContentRender(message)
+      });
+    },
+    appendMessage() {
+      const id = "3";
+      const { IMUI } = this.$refs;
+      const message = generateMessage();
+
+      IMUI.appendMessage(message, id);
+      this._addUnread(id, message);
+    },
+    currentAppendMessage() {
+      const { IMUI } = this.$refs;
+      const message = generateMessage();
+
+      IMUI.appendMessage(message);
+      this._addUnread(IMUI.currentContact.id, message);
+    },
+    updateContact() {
+      this.$refs.IMUI.updateContact("3", {
+        unread: 10,
+        displayName: generateRandWord(),
+        lastSendTime: getTime(),
+        lastContent: "修改昵称为随机字母"
+      });
+    },
     changeDrawer(contact) {
       this.$refs.IMUI.changeDrawer(() => {
-        return [<h2>自定义抽屉</h2>, contact.displayName];
+        return (
+          <div class="drawer-content">
+            <p>
+              <b>自定义抽屉</b>
+            </p>
+            <p>{contact.displayName}</p>
+          </div>
+        );
       });
     },
     handleChangeContact(contact) {
+      console.log("Event:change-contact");
       this.$refs.IMUI.updateContact(contact.id, {
         //displayName: "123",
         unread: 0
@@ -427,11 +521,13 @@ export default {
       this.$refs.IMUI.closeDrawer();
     },
     handleSend(message, next, file) {
+      console.log("Event:send");
       setTimeout(() => {
         next();
       }, 1000);
     },
     handlePullMessages(contact, next) {
+      console.log("Event:pull-messages");
       const messages = [
         {
           id: "8ad7e98e-5225-4892-8131-4b2ee7797599",
@@ -520,7 +616,9 @@ export default {
       ];
       next(messages);
     },
-    handleChangeMenu() {},
+    handleChangeMenu() {
+      console.log("Event:change-menu");
+    },
     openCustomContainer() {}
   }
 };
@@ -528,12 +626,18 @@ export default {
 
 <style lang="stylus">
 body
-  background #384558 !important
+  background #3d495c !important
+.action
+  margin-top 30px
+  button
+    margin-right 10px
 .imui-center
   position absolute
   top 50%
   left 50%
   transform translate(-50%,-50%)
+.drawer-content
+  padding 15px
 .more
   font-size 32px
   line-height 18px

examples/dist/css/index.2750e9e8.css

@@ -0,0 +1 @@
+body{background:#3d495c!important}.action{margin-top:30px}.action button{margin-right:10px}.imui-center{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.drawer-content{padding:15px}.more{font-size:32px;line-height:18px;height:32px;position:absolute;top:6px;right:14px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:#999}.more:active{color:#000}.lemon-tabs{background:#f6f6f6}.lemon-tabs-content{padding:15px}.lemon-tabs-content,.lemon-tabs-content__pane{width:100%;height:100%}.lemon-tabs-nav{display:-webkit-box;display:-ms-flexbox;display:flex;background:#eee}.lemon-tabs-nav__item{line-height:38px;padding:0 15px;cursor:pointer;-webkit-transition:all .3s cubic-bezier(.645,.045,.355,1);transition:all .3s cubic-bezier(.645,.045,.355,1)}.lemon-tabs-nav__item--active{background:#f6f6f6}.lemon-popover{border:1px solid #eee;font-size:14px;font-variant:tabular-nums;line-height:1.5;color:rgba(0,0,0,.65);z-index:10;background-color:#fff;border-radius:4px;-webkit-box-shadow:0 2px 8px rgba(0,0,0,.15);box-shadow:0 2px 8px rgba(0,0,0,.15);position:absolute;-webkit-transform-origin:50% 150%;transform-origin:50% 150%}.lemon-popover__content{padding:15px;-webkit-box-sizing:border-box;box-sizing:border-box;position:relative;z-index:1}.lemon-popover__arrow{left:50%;-webkit-transform:translateX(-50%) rotate(45deg);transform:translateX(-50%) rotate(45deg);position:absolute;z-index:0;bottom:-4px;-webkit-box-shadow:3px 3px 7px rgba(0,0,0,.07);box-shadow:3px 3px 7px rgba(0,0,0,.07);width:8px;height:8px;background:#fff}.slide-top-enter-active,.slide-top-leave-active{-webkit-transition:all .3s cubic-bezier(.645,.045,.355,1);transition:all .3s cubic-bezier(.645,.045,.355,1)}.slide-top-enter,.slide-top-leave-to{-webkit-transform:translateY(-10px) scale(.8);transform:translateY(-10px) scale(.8);opacity:0}.lemon-button{outline:none;line-height:1.499;display:inline-block;font-weight:400;text-align:center;-ms-touch-action:manipulation;touch-action:manipulation;cursor:pointer;background-image:none;border:1px solid #ddd;-webkit-box-sizing:border-box;box-sizing:border-box;white-space:nowrap;padding:0 15px;font-size:14px;border-radius:4px;height:32px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-transition:all .3s cubic-bezier(.645,.045,.355,1);transition:all .3s cubic-bezier(.645,.045,.355,1);color:rgba(0,0,0,.65);background-color:#fff;-webkit-box-shadow:0 2px 0 rgba(0,0,0,.015);box-shadow:0 2px 0 rgba(0,0,0,.015);text-shadow:0 -1px 0 rgba(0,0,0,.12)}.lemon-button:hover:not([disabled]){border-color:#666;color:#333}.lemon-button:active{background-color:#ddd}.lemon-button[disabled]{cursor:not-allowed;color:#aaa;background:#eee}.lemon-badge{position:relative;display:inline-block}.lemon-badge__label{border-radius:10px;background:#f5222d;color:#fff;text-align:center;font-size:12px;font-weight:400;white-space:nowrap;-webkit-box-shadow:0 0 0 1px #fff;box-shadow:0 0 0 1px #fff;z-index:10;position:absolute;-webkit-transform:translateX(50%);transform:translateX(50%);-webkit-transform-origin:100%;transform-origin:100%;display:inline-block;padding:0 4px;height:18px;line-height:17px;min-width:10px;top:-4px;right:6px}.lemon-badge__label--dot{width:10px;height:10px;min-width:auto;padding:0;top:-3px;right:2px}.lemon-avatar{font-variant:tabular-nums;line-height:1.5;-webkit-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0;list-style:none;display:inline-block;text-align:center;background:#ccc;color:hsla(0,0%,100%,.7);white-space:nowrap;position:relative;overflow:hidden;vertical-align:middle;border-radius:4px}.lemon-avatar img{width:100%;height:100%;display:block}.lemon-contact{padding:10px 14px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden;background:#efefef}.lemon-contact p{margin:0}.lemon-contact--active{background:#bebdbd}.lemon-contact:hover:not(.lemon-contact--active){background:#e3e3e3}.lemon-contact:hover:not(.lemon-contact--active) .el-badge__content{border-color:#ddd}.lemon-contact__avatar{float:left;margin-right:10px}.lemon-contact__avatar img{display:block}.lemon-contact__avatar .ant-badge-count{display:inline-block;padding:0 4px;height:18px;line-height:18px;min-width:18px;top:-4px;right:7px}.lemon-contact__label{display:-webkit-box;display:-ms-flexbox;display:flex}.lemon-contact__time{font-size:12px;line-height:18px;padding-left:6px;color:#999;white-space:nowrap}.lemon-contact__name{display:block;width:100%}.lemon-contact__content,.lemon-contact__name{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.lemon-contact__content{font-size:12px;color:#999}.lemon-contact__content img{height:14px;display:inline-block;vertical-align:middle;margin:0 1px}.lemon-contact--name-center .lemon-contact__label{padding-bottom:0;line-height:38px}.lemon-editor{height:200Line truncated

examples/dist/css/index.f11a88a4.css

@@ -1 +0,0 @@
-body{background:#384558!important}.imui-center{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.more{font-size:32px;line-height:18px;height:32px;position:absolute;top:6px;right:14px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:#999}.more:active{color:#000}.lemon-tabs{background:#f6f6f6}.lemon-tabs-content{padding:15px}.lemon-tabs-content,.lemon-tabs-content__pane{width:100%;height:100%}.lemon-tabs-nav{display:-webkit-box;display:-ms-flexbox;display:flex;background:#eee}.lemon-tabs-nav__item{line-height:38px;padding:0 15px;cursor:pointer;-webkit-transition:all .3s cubic-bezier(.645,.045,.355,1);transition:all .3s cubic-bezier(.645,.045,.355,1)}.lemon-tabs-nav__item--active{background:#f6f6f6}.lemon-popover{border:1px solid #eee;font-size:14px;font-variant:tabular-nums;line-height:1.5;color:rgba(0,0,0,.65);z-index:10;background-color:#fff;border-radius:4px;-webkit-box-shadow:0 2px 8px rgba(0,0,0,.15);box-shadow:0 2px 8px rgba(0,0,0,.15);position:absolute;-webkit-transform-origin:50% 150%;transform-origin:50% 150%}.lemon-popover__content{padding:15px;-webkit-box-sizing:border-box;box-sizing:border-box;position:relative;z-index:1}.lemon-popover__arrow{left:50%;-webkit-transform:translateX(-50%) rotate(45deg);transform:translateX(-50%) rotate(45deg);position:absolute;z-index:0;bottom:-4px;-webkit-box-shadow:3px 3px 7px rgba(0,0,0,.07);box-shadow:3px 3px 7px rgba(0,0,0,.07);width:8px;height:8px;background:#fff}.slide-top-enter-active,.slide-top-leave-active{-webkit-transition:all .3s cubic-bezier(.645,.045,.355,1);transition:all .3s cubic-bezier(.645,.045,.355,1)}.slide-top-enter,.slide-top-leave-to{-webkit-transform:translateY(-10px) scale(.8);transform:translateY(-10px) scale(.8);opacity:0}.lemon-button{outline:none;line-height:1.499;display:inline-block;font-weight:400;text-align:center;-ms-touch-action:manipulation;touch-action:manipulation;cursor:pointer;background-image:none;border:1px solid #ddd;-webkit-box-sizing:border-box;box-sizing:border-box;white-space:nowrap;padding:0 15px;font-size:14px;border-radius:4px;height:32px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-transition:all .3s cubic-bezier(.645,.045,.355,1);transition:all .3s cubic-bezier(.645,.045,.355,1);color:rgba(0,0,0,.65);background-color:#fff;-webkit-box-shadow:0 2px 0 rgba(0,0,0,.015);box-shadow:0 2px 0 rgba(0,0,0,.015);text-shadow:0 -1px 0 rgba(0,0,0,.12)}.lemon-button:hover:not([disabled]){border-color:#666;color:#333}.lemon-button:active{background-color:#ddd}.lemon-button[disabled]{cursor:not-allowed;color:#aaa;background:#eee}.lemon-badge{position:relative;display:inline-block}.lemon-badge__label{border-radius:10px;background:#f5222d;color:#fff;text-align:center;font-size:12px;font-weight:400;white-space:nowrap;-webkit-box-shadow:0 0 0 1px #fff;box-shadow:0 0 0 1px #fff;z-index:10;position:absolute;-webkit-transform:translateX(50%);transform:translateX(50%);-webkit-transform-origin:100%;transform-origin:100%;display:inline-block;padding:0 4px;height:18px;line-height:17px;min-width:10px;top:-4px;right:6px}.lemon-badge__label--dot{width:10px;height:10px;min-width:auto;padding:0;top:-3px;right:2px}.lemon-avatar{font-variant:tabular-nums;line-height:1.5;-webkit-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0;list-style:none;display:inline-block;text-align:center;background:#ccc;color:hsla(0,0%,100%,.7);white-space:nowrap;position:relative;overflow:hidden;vertical-align:middle;border-radius:4px}.lemon-avatar img{width:100%;height:100%;display:block}.lemon-contact{padding:10px 14px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden;background:#efefef}.lemon-contact p{margin:0}.lemon-contact--active{background:#bebdbd}.lemon-contact:hover:not(.lemon-contact--active){background:#e3e3e3}.lemon-contact:hover:not(.lemon-contact--active) .el-badge__content{border-color:#ddd}.lemon-contact__avatar{float:left;margin-right:10px}.lemon-contact__avatar img{display:block}.lemon-contact__avatar .ant-badge-count{display:inline-block;padding:0 4px;height:18px;line-height:18px;min-width:18px;top:-4px;right:7px}.lemon-contact__label{display:-webkit-box;display:-ms-flexbox;display:flex}.lemon-contact__time{font-size:12px;line-height:18px;padding-left:6px;color:#999;white-space:nowrap}.lemon-contact__name{display:block;width:100%}.lemon-contact__content,.lemon-contact__name{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.lemon-contact__content{font-size:12px;color:#999}.lemon-contact__content img{height:14px;display:inline-block;vertical-align:middle;margin:0 1px}.lemon-contact--name-center .lemon-contact__label{padding-bottom:0;line-height:38px}.lemon-editor{height:200px;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;Line truncated

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.f11a88a4.css rel=preload as=style><link href=js/chunk-vendors.99d7e0a4.js rel=preload as=script><link href=js/index.8f19e614.js rel=preload as=script><link href=css/index.f11a88a4.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.99d7e0a4.js></script><script src=js/index.8f19e614.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.2750e9e8.css rel=preload as=style><link href=js/chunk-vendors.99d7e0a4.js rel=preload as=script><link href=js/index.5f6fc069.js rel=preload as=script><link href=css/index.2750e9e8.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.99d7e0a4.js></script><script src=js/index.5f6fc069.js></script></body></html>

examples/dist/js/index.5f6fc069.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},on:{"change-menu":e.handleChangeMenu,"change-contact":e.handleChangeContact,"pull-messages":e.handlePullMessages,send:e.handleSend},scopedSlots:e._u([{key:"cover",fn:function(){return[n("h1",{staticStyle:{"text-indent":"20px"}},[e._v("自定义封面内容")])]},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("…")])]}}])}),n("div",{staticClass:"action"},[n("lemon-button",{on:{click:e.currentAppendMessage}},[e._v("在当前窗口发送消息")]),n("lemon-button",{on:{click:e.appendMessage}},[e._v("指定联系人发送消息")]),n("lemon-button",{on:{click:e.updateContact}},[e._v("修改联系人信息")])],1)],1)])},r=[],s=(n("8e6e"),n("ac6a"),n("456d"),n("bd86"));n("c5f6"),n("6b54");function o(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 c(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?o(n,!0).forEach(function(t){Object(s["a"])(e,t,n[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):o(n).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))})}return e}var l,u,d,m,f,p,h,g,v,b,x=function(){return(new Date).getTime()},_=function(){return Number(Math.random().toString().substr(3,length)+Date.now()).toString(36)},y=function(){return Math.random().toString(36).substr(2)},w=function(){return{id:_(),status:"succeed",type:"text",sendTime:x(),content:"随机回复："+y(),toContactId:"123",fromUser:{id:"222",displayName:"系统测试",avatar:"https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1820523987,3798556096&fm=26&gp=0.jpg"}}},j={name:"app",data:function(){return{user:{id:"superadmin",displayName:"IMUI super",avatar:"https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=4085009425,1005454674&fm=26&gp=0.jpg"}}},mounted:function(Line truncated

examples/dist/js/index.8f19e614.js

@@ -1 +0,0 @@
-(function(e){function t(t){for(var i,s,o=t[0],c=t[1],l=t[2],m=0,d=[];m<o.length;m++)s=o[m],a[s]&&d.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(d.length)d.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("lemon-imui",{ref:"IMUI",staticClass:"imui-center",attrs:{user:e.user},on:{"change-menu":e.handleChangeMenu,"change-contact":e.handleChangeContact,"pull-messages":e.handlePullMessages,send:e.handleSend},scopedSlots:e._u([{key:"cover",fn:function(){return[n("h1",{staticStyle:{"text-indent":"20px"}},[e._v("自定义封面内容")])]},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("…")])]}}])})],1)},r=[],s=(n("8e6e"),n("ac6a"),n("456d"),n("bd86"));function o(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 c(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?o(n,!0).forEach(function(t){Object(s["a"])(e,t,n[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):o(n).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))})}return e}var l,u,m,d,f,p,h,g,v,b,x={name:"app",data:function(){return{user:{id:"superadmin",displayName:"IMUI super",avatar:"https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=4085009425,1005454674&fm=26&gp=0.jpg"}}},mounted:function(){var e=this.$createElement,t={id:"1",displayName:"工作协作群",avatar:"https://img.ivsky.com/img/tupian/li/201903/24/richu_riluo-015.jpg",type:"single",index:"A",unread:0,lastSendTime:1566047865417,lastContent:"2"},n={id:"2",displayName:"马林",avatar:"https://img.ivsky.com/img/tupian/li/201902/27/yanjing_meinv.jpg",type:"single",index:"B",click:function(e){e()},renderContainer:function(){return e("h1",{style:"text-indent:20px"},["自定义页面"])},lastSendTime:1345209465e3,lastContent:"12312",unread:2},i={id:"3",displayName:"范君",avatar:"https://img.ivsky.com/img/tupian/li/201903/21/huahuan_xiaonvhai.jpg",type:"many",index:"C",lastSendTime:3},a=this.$refs.IMUI;setTimeout(function(){},2e3);var r=[c({},t),c({},n),c({},i)];a.initContacts(r),a.initEmoji([{label:"表情",Line truncated

package.json

@@ -3,9 +3,9 @@
   "version": "1.0.2",
   "main": "dist/index.umd.min.js",
   "scripts": {
-    "build-examples": "vue-cli-service build --dest examples/dist examples/main.js",
     "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"
   },
   "dependencies": {

packages/components/index.vue

@@ -164,7 +164,7 @@ export default {
       this.appendMessage(message);
       this._emitSend(message, () => {
         this.updateContact(message.toContactId, {
-          lastContent: lastContentRender[message.type].call(this, message),
+          lastContent: this.lastContentRender(message),
           lastSendTime: message.sendTime
         });
       });
@@ -191,7 +191,7 @@ export default {
         message,
         () => {
           this.updateContact(message.toContactId, {
-            lastContent: lastContentRender[message.type].call(this, message),
+            lastContent: this.lastContentRender(message),
             lastSendTime: message.sendTime
           });
         },
@@ -493,6 +493,9 @@ export default {
     setLastContentRender(messageType, render) {
       lastContentRender[messageType] = render;
     },
+    lastContentRender(message) {
+      return lastContentRender[message.type].call(this, message);
+    },
     /**
      * 将字符串内的 EmojiItem.name 替换为 img
      * @param {String} str 被替换的字符串
@@ -789,11 +792,10 @@ bezier = cubic-bezier(0.645, 0.045, 0.355, 1)
   height 580px
   display flex
   font-size 14px
-  border-radius 5px
   //mask-image radial-gradient(circle, white 100%, black 100%)
   background #efefef
   transition all .4s bezier
-  border-radius 4px
+  position relative
   p
     margin 0
   img
@@ -866,13 +868,13 @@ bezier = cubic-bezier(0.645, 0.045, 0.355, 1)
   top 0
   right 0
   overflow hidden
-  width drawer-width
   background #f4f4f4
   transition width .4s bezier
-  height 100%
   z-index 1
-  //border-left 1px solid #e9e9e9
+  width drawer-width
+  height 100%
   box-sizing border-box
+  //border-left 1px solid #e9e9e9
 +b(lemon-wrapper)
   +m(drawer-show)
     +b(lemon-drawer)