UPDATE

examples/App.vue

@@ -1,35 +1,78 @@
 <template>
   <div id="app">
-    <lemon-imui
-      :user="user"
-      class="imui-center"
-      ref="IMUI"
-      @change-menu="handleChangeMenu"
-      @change-contact="handleChangeContact"
-      @pull-messages="handlePullMessages"
-      @send="handleSend"
-    >
-      <template #cover>
-        <h1 style="text-indent:20px">自定义封面内容</h1>
-      </template>
-      <!-- <template #contact-info="contact">
+    <div class="imui-center">
+      <lemon-imui
+        :user="user"
+        ref="IMUI"
+        @change-menu="handleChangeMenu"
+        @change-contact="handleChangeContact"
+        @pull-messages="handlePullMessages"
+        @send="handleSend"
+      >
+        <template #cover>
+          <h1 style="text-indent:20px">自定义封面内容</h1>
+        </template>
+        <!-- <template #contact-info="contact">
         <span style="color:blue">contact-info {{ contact }}</span>
       </template> -->
-      <!--
+        <!--
       <template #drawer="contact">
         <h1>自定义抽屉内容</h1>
         <p>{{ contact }}</p>
       </template>
       -->
-      <template #contact-title="contact">
-        <span>{{ contact.displayName }}</span>
-        <small class="more" @click="changeDrawer(contact)">&#8230;</small>
-      </template>
-    </lemon-imui>
+        <template #contact-title="contact">
+          <span>{{ contact.displayName }}</span>
+          <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/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>

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)