新增getCurrentContact,getCurrentMessages方

法。优化removeMessage、updateMessage，精简模式支持动态切换。

dist/index.common.js

@@ -7535,6 +7535,7 @@ function () {
 
 
 
+
 function componentsvue_type_script_lang_js_ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
 
 function componentsvue_type_script_lang_js_objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { componentsvue_type_script_lang_js_ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { componentsvue_type_script_lang_js_ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
@@ -7544,7 +7545,7 @@ function componentsvue_type_script_lang_js_objectSpread(target) { for (var i = 1
 
 
 
-var componentsvue_type_script_lang_js_messages = {};
+var allMessages = {};
 var emojiMap = {};
 
 var renderDrawerContent = function renderDrawerContent() {};
@@ -7629,15 +7630,7 @@ var renderDrawerContent = function renderDrawerContent() {};
     };
   },
   render: function render() {
-    var nodes = [];
+    return this._renderWrapper([this._renderMenu(), this._renderSidebarMessage(), this._renderSidebarContact(), this._renderContainer(), this._renderDrawer()]);
-
-    if (this.simple == false) {
-      nodes.push.apply(nodes, [this._renderMenu(), this._renderSidebarMessage(), this._renderSidebarContact()]);
-    }
-
-    nodes.push(this._renderContainer());
-    nodes.push(this._renderDrawer());
-    return this._renderWrapper(nodes);
   },
   created: function created() {
     this.initMenus();
@@ -7722,7 +7715,7 @@ var renderDrawerContent = function renderDrawerContent() {};
     appendMessage: function appendMessage(message) {
       var scrollToBottom = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
 
-      if (componentsvue_type_script_lang_js_messages[message.toContactId] === undefined) {
+      if (allMessages[message.toContactId] === undefined) {
         this.updateContact(message.toContactId, {
           unread: "+1",
           lastSendTime: message.sendTime,
@@ -7755,9 +7748,8 @@ var renderDrawerContent = function renderDrawerContent() {};
           status: "succeed"
         };
         next();
-        message = Object.assign(message, replaceMessage);
 
-        _this3.forceUpdateMessage(message.id);
+        _this3.updateMessage(Object.assign(message, replaceMessage));
       }, file);
     },
     _handleSend: function _handleSend(text) {
@@ -7837,7 +7829,9 @@ var renderDrawerContent = function renderDrawerContent() {};
           width: this.width,
           height: this.height
         },
-        "class": ["lemon-wrapper", "lemon-wrapper--theme-".concat(this.theme), this.drawerVisible && "lemon-wrapper--drawer-show"]
+        "class": ["lemon-wrapper", "lemon-wrapper--theme-".concat(this.theme), {
+          'lemon-wrapper--simple': this.simple
+        }, this.drawerVisible && "lemon-wrapper--drawer-show"]
       }, [children]);
     },
     _renderMenu: function _renderMenu() {
@@ -8096,18 +8090,16 @@ var renderDrawerContent = function renderDrawerContent() {};
       this.contacts[type](data);
     },
     _addMessage: function _addMessage(data, contactId, t) {
-      var _messages$contactId;
+      var _allMessages$contactI;
 
       var type = {
         0: "unshift",
         1: "push"
       }[t];
       if (!Array.isArray(data)) data = [data];
-      componentsvue_type_script_lang_js_messages[contactId] = componentsvue_type_script_lang_js_messages[contactId] || [];
+      allMessages[contactId] = allMessages[contactId] || [];
 
-      (_messages$contactId = componentsvue_type_script_lang_js_messages[contactId])[type].apply(_messages$contactId, _toConsumableArray(data));
+      (_allMessages$contactI = allMessages[contactId])[type].apply(_allMessages$contactI, _toConsumableArray(data));
-
-      this.forceUpdateMessage();
     },
 
     /**
@@ -8134,8 +8126,8 @@ var renderDrawerContent = function renderDrawerContent() {};
       });
     },
     updateCurrentMessages: function updateCurrentMessages() {
-      if (!componentsvue_type_script_lang_js_messages[this.currentContactId]) componentsvue_type_script_lang_js_messages[this.currentContactId] = [];
+      if (!allMessages[this.currentContactId]) allMessages[this.currentContactId] = [];
-      this.currentMessages = componentsvue_type_script_lang_js_messages[this.currentContactId];
+      this.currentMessages = allMessages[this.currentContactId];
     },
 
     /**
@@ -8194,7 +8186,7 @@ var renderDrawerContent = function renderDrawerContent() {};
                   this.$refs.messages.resetLoadState();
                 }
 
-                if (!componentsvue_type_script_lang_js_messages[contactId]) {
+                if (!allMessages[contactId]) {
                   this.updateCurrentMessages();
 
                   this._emitPullMessages(function (isEnd) {
@@ -8228,13 +8220,15 @@ var renderDrawerContent = function renderDrawerContent() {};
      * @param messageId 消息 id
      * @param contactId 联系人 id
      */
-    removeMessage: function removeMessage(messageId, contactId) {
+    removeMessage: function removeMessage(messageId) {
-      var index = this.findMessageIndexById(messageId, contactId);
+      var message = this.findMessage(messageId);
-
+      if (!message) return false;
-      if (index !== -1) {
+      var index = allMessages[message.toContactId].findIndex(function (_ref) {
-        componentsvue_type_script_lang_js_messages[contactId].splice(index, 1);
+        var id = _ref.id;
-        this.forceUpdateMessage();
+        return id == messageId;
-      }
+      });
+      allMessages[message.toContactId].splice(index, 1);
+      return true;
     },
 
     /**
@@ -8242,13 +8236,13 @@ var renderDrawerContent = function renderDrawerContent() {};
      * @param {Message} data 根据 data.id 查找聊天消息并覆盖传入的值
      * @param contactId 联系人 id
      */
-    updateMessage: function updateMessage(messageId, contactId, data) {
+    updateMessage: function updateMessage(message) {
-      var index = this.findMessageIndexById(messageId, contactId);
+      if (!message.id) return false;
-
+      delete message.toContactId;
-      if (index !== -1) {
+      var historyMessage = this.findMessage(message.id);
-        componentsvue_type_script_lang_js_messages[contactId][index] = Object.assign(componentsvue_type_script_lang_js_messages[contactId][index], data);
+      if (!historyMessage) return false;
-        this.forceUpdateMessage(messageId);
+      historyMessage = Object.assign(historyMessage, message);
-      }
+      return true;
     },
 
     /**
@@ -8300,18 +8294,15 @@ var renderDrawerContent = function renderDrawerContent() {};
         });
       }
 
-      data.forEach(function (_ref) {
+      data.forEach(function (_ref2) {
-        var name = _ref.name,
+        var name = _ref2.name,
-            src = _ref.src;
+            src = _ref2.src;
         return emojiMap[name] = src;
       });
     },
     initEditorTools: function initEditorTools(data) {
       this.editorTools = data;
-      this.$refs.editor.initTools(data); // if(this.editorTools){
+      this.$refs.editor.initTools(data);
-      //   this.$refs.editor.initTools(data);
-      // }
-      //this.$refs.editor.$forceUpdate();
     },
 
     /**
@@ -8427,21 +8418,23 @@ var renderDrawerContent = function renderDrawerContent() {};
         return item.id == contactId;
       });
     },
-    findMessageIndexById: function findMessageIndexById(messageId, contactId) {
+    findMessage: function findMessage(messageId) {
-      var msg = componentsvue_type_script_lang_js_messages[contactId];
+      return Object.values(allMessages).flat().find(function (_ref3) {
-
+        var id = _ref3.id;
-      if (isEmpty(msg)) {
+        return id == messageId;
-        return -1;
-      }
-
-      return msg.findIndex(function (item) {
-        return item.id == messageId;
       });
     },
-    findMessageById: function findMessageById(messageId, contactId) {
+    // findMessageIndexById(messageId, contactId) {
-      var index = this.findMessageIndexById(messageId, contactId);
+    //   const msg = messages[contactId];
-      if (index !== -1) return componentsvue_type_script_lang_js_messages[contactId][index];
+    //   if (isEmpty(msg)) {
-    },
+    //     return -1;
+    //   }
+    //   return msg.findIndex(item => item.id == messageId);
+    // },
+    // findMessageById(messageId, contactId) {
+    //   const index = this.findMessageIndexById(messageId, contactId);
+    //   if (index !== -1) return messages[contactId][index];
+    // },
 
     /**
      * 返回所有联系人
@@ -8450,20 +8443,20 @@ var renderDrawerContent = function renderDrawerContent() {};
     getContacts: function getContacts() {
       return this.contacts;
     },
+    //返回当前聊天窗口联系人信息
+    getCurrentContact: function getCurrentContact() {
+      return this.currentContact;
+    },
+    getCurrentMessages: function getCurrentMessages() {
+      return this.currentMessages;
+    },
 
     /**
      * 返回所有消息
      * @return {Object<Contact.id,Message>}
      */
     getMessages: function getMessages(contactId) {
-      return (contactId ? componentsvue_type_script_lang_js_messages[contactId] : componentsvue_type_script_lang_js_messages) || [];
+      return (contactId ? allMessages[contactId] : allMessages) || [];
-    },
-
-    /**
-     * 将自定义的HTML显示在主窗口内
-     */
-    openrenderContainer: function openrenderContainer(vnode) {//renderContainerQueue[this.activeSidebar] = vnode;
-      //this.$slots._renderContainer = vnode;
     },
     changeDrawer: function changeDrawer(render) {
       this.drawerVisible = !this.drawerVisible;

dist/index.umd.js

@@ -7544,6 +7544,7 @@ function () {
 
 
 
+
 function componentsvue_type_script_lang_js_ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
 
 function componentsvue_type_script_lang_js_objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { componentsvue_type_script_lang_js_ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { componentsvue_type_script_lang_js_ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
@@ -7553,7 +7554,7 @@ function componentsvue_type_script_lang_js_objectSpread(target) { for (var i = 1
 
 
 
-var componentsvue_type_script_lang_js_messages = {};
+var allMessages = {};
 var emojiMap = {};
 
 var renderDrawerContent = function renderDrawerContent() {};
@@ -7638,15 +7639,7 @@ var renderDrawerContent = function renderDrawerContent() {};
     };
   },
   render: function render() {
-    var nodes = [];
+    return this._renderWrapper([this._renderMenu(), this._renderSidebarMessage(), this._renderSidebarContact(), this._renderContainer(), this._renderDrawer()]);
-
-    if (this.simple == false) {
-      nodes.push.apply(nodes, [this._renderMenu(), this._renderSidebarMessage(), this._renderSidebarContact()]);
-    }
-
-    nodes.push(this._renderContainer());
-    nodes.push(this._renderDrawer());
-    return this._renderWrapper(nodes);
   },
   created: function created() {
     this.initMenus();
@@ -7731,7 +7724,7 @@ var renderDrawerContent = function renderDrawerContent() {};
     appendMessage: function appendMessage(message) {
       var scrollToBottom = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
 
-      if (componentsvue_type_script_lang_js_messages[message.toContactId] === undefined) {
+      if (allMessages[message.toContactId] === undefined) {
         this.updateContact(message.toContactId, {
           unread: "+1",
           lastSendTime: message.sendTime,
@@ -7764,9 +7757,8 @@ var renderDrawerContent = function renderDrawerContent() {};
           status: "succeed"
         };
         next();
-        message = Object.assign(message, replaceMessage);
 
-        _this3.forceUpdateMessage(message.id);
+        _this3.updateMessage(Object.assign(message, replaceMessage));
       }, file);
     },
     _handleSend: function _handleSend(text) {
@@ -7846,7 +7838,9 @@ var renderDrawerContent = function renderDrawerContent() {};
           width: this.width,
           height: this.height
         },
-        "class": ["lemon-wrapper", "lemon-wrapper--theme-".concat(this.theme), this.drawerVisible && "lemon-wrapper--drawer-show"]
+        "class": ["lemon-wrapper", "lemon-wrapper--theme-".concat(this.theme), {
+          'lemon-wrapper--simple': this.simple
+        }, this.drawerVisible && "lemon-wrapper--drawer-show"]
       }, [children]);
     },
     _renderMenu: function _renderMenu() {
@@ -8105,18 +8099,16 @@ var renderDrawerContent = function renderDrawerContent() {};
       this.contacts[type](data);
     },
     _addMessage: function _addMessage(data, contactId, t) {
-      var _messages$contactId;
+      var _allMessages$contactI;
 
       var type = {
         0: "unshift",
         1: "push"
       }[t];
       if (!Array.isArray(data)) data = [data];
-      componentsvue_type_script_lang_js_messages[contactId] = componentsvue_type_script_lang_js_messages[contactId] || [];
+      allMessages[contactId] = allMessages[contactId] || [];
 
-      (_messages$contactId = componentsvue_type_script_lang_js_messages[contactId])[type].apply(_messages$contactId, _toConsumableArray(data));
+      (_allMessages$contactI = allMessages[contactId])[type].apply(_allMessages$contactI, _toConsumableArray(data));
-
-      this.forceUpdateMessage();
     },
 
     /**
@@ -8143,8 +8135,8 @@ var renderDrawerContent = function renderDrawerContent() {};
       });
     },
     updateCurrentMessages: function updateCurrentMessages() {
-      if (!componentsvue_type_script_lang_js_messages[this.currentContactId]) componentsvue_type_script_lang_js_messages[this.currentContactId] = [];
+      if (!allMessages[this.currentContactId]) allMessages[this.currentContactId] = [];
-      this.currentMessages = componentsvue_type_script_lang_js_messages[this.currentContactId];
+      this.currentMessages = allMessages[this.currentContactId];
     },
 
     /**
@@ -8203,7 +8195,7 @@ var renderDrawerContent = function renderDrawerContent() {};
                   this.$refs.messages.resetLoadState();
                 }
 
-                if (!componentsvue_type_script_lang_js_messages[contactId]) {
+                if (!allMessages[contactId]) {
                   this.updateCurrentMessages();
 
                   this._emitPullMessages(function (isEnd) {
@@ -8237,13 +8229,15 @@ var renderDrawerContent = function renderDrawerContent() {};
      * @param messageId 消息 id
      * @param contactId 联系人 id
      */
-    removeMessage: function removeMessage(messageId, contactId) {
+    removeMessage: function removeMessage(messageId) {
-      var index = this.findMessageIndexById(messageId, contactId);
+      var message = this.findMessage(messageId);
-
+      if (!message) return false;
-      if (index !== -1) {
+      var index = allMessages[message.toContactId].findIndex(function (_ref) {
-        componentsvue_type_script_lang_js_messages[contactId].splice(index, 1);
+        var id = _ref.id;
-        this.forceUpdateMessage();
+        return id == messageId;
-      }
+      });
+      allMessages[message.toContactId].splice(index, 1);
+      return true;
     },
 
     /**
@@ -8251,13 +8245,13 @@ var renderDrawerContent = function renderDrawerContent() {};
      * @param {Message} data 根据 data.id 查找聊天消息并覆盖传入的值
      * @param contactId 联系人 id
      */
-    updateMessage: function updateMessage(messageId, contactId, data) {
+    updateMessage: function updateMessage(message) {
-      var index = this.findMessageIndexById(messageId, contactId);
+      if (!message.id) return false;
-
+      delete message.toContactId;
-      if (index !== -1) {
+      var historyMessage = this.findMessage(message.id);
-        componentsvue_type_script_lang_js_messages[contactId][index] = Object.assign(componentsvue_type_script_lang_js_messages[contactId][index], data);
+      if (!historyMessage) return false;
-        this.forceUpdateMessage(messageId);
+      historyMessage = Object.assign(historyMessage, message);
-      }
+      return true;
     },
 
     /**
@@ -8309,18 +8303,15 @@ var renderDrawerContent = function renderDrawerContent() {};
         });
       }
 
-      data.forEach(function (_ref) {
+      data.forEach(function (_ref2) {
-        var name = _ref.name,
+        var name = _ref2.name,
-            src = _ref.src;
+            src = _ref2.src;
         return emojiMap[name] = src;
       });
     },
     initEditorTools: function initEditorTools(data) {
       this.editorTools = data;
-      this.$refs.editor.initTools(data); // if(this.editorTools){
+      this.$refs.editor.initTools(data);
-      //   this.$refs.editor.initTools(data);
-      // }
-      //this.$refs.editor.$forceUpdate();
     },
 
     /**
@@ -8436,21 +8427,23 @@ var renderDrawerContent = function renderDrawerContent() {};
         return item.id == contactId;
       });
     },
-    findMessageIndexById: function findMessageIndexById(messageId, contactId) {
+    findMessage: function findMessage(messageId) {
-      var msg = componentsvue_type_script_lang_js_messages[contactId];
+      return Object.values(allMessages).flat().find(function (_ref3) {
-
+        var id = _ref3.id;
-      if (isEmpty(msg)) {
+        return id == messageId;
-        return -1;
-      }
-
-      return msg.findIndex(function (item) {
-        return item.id == messageId;
       });
     },
-    findMessageById: function findMessageById(messageId, contactId) {
+    // findMessageIndexById(messageId, contactId) {
-      var index = this.findMessageIndexById(messageId, contactId);
+    //   const msg = messages[contactId];
-      if (index !== -1) return componentsvue_type_script_lang_js_messages[contactId][index];
+    //   if (isEmpty(msg)) {
-    },
+    //     return -1;
+    //   }
+    //   return msg.findIndex(item => item.id == messageId);
+    // },
+    // findMessageById(messageId, contactId) {
+    //   const index = this.findMessageIndexById(messageId, contactId);
+    //   if (index !== -1) return messages[contactId][index];
+    // },
 
     /**
      * 返回所有联系人
@@ -8459,20 +8452,20 @@ var renderDrawerContent = function renderDrawerContent() {};
     getContacts: function getContacts() {
       return this.contacts;
     },
+    //返回当前聊天窗口联系人信息
+    getCurrentContact: function getCurrentContact() {
+      return this.currentContact;
+    },
+    getCurrentMessages: function getCurrentMessages() {
+      return this.currentMessages;
+    },
 
     /**
      * 返回所有消息
      * @return {Object<Contact.id,Message>}
      */
     getMessages: function getMessages(contactId) {
-      return (contactId ? componentsvue_type_script_lang_js_messages[contactId] : componentsvue_type_script_lang_js_messages) || [];
+      return (contactId ? allMessages[contactId] : allMessages) || [];
-    },
-
-    /**
-     * 将自定义的HTML显示在主窗口内
-     */
-    openrenderContainer: function openrenderContainer(vnode) {//renderContainerQueue[this.activeSidebar] = vnode;
-      //this.$slots._renderContainer = vnode;
     },
     changeDrawer: function changeDrawer(render) {
       this.drawerVisible = !this.drawerVisible;

examples/App.vue

@@ -30,7 +30,9 @@
       <a target="_blank" style="font-size:14px" href="https://codesandbox.io/s/sweet-chaplygin-s24mb?fontsize=14&hidenavigation=1&theme=dark">在线编辑代码</a>
       <div class="action">
         <lemon-button @click="appendMessage">发送消息</lemon-button>
-        <lemon-button @click="appendCustomMessage">发送一条自定义消息</lemon-button>
+        <lemon-button @click="removeMessage">删除最近一条消息</lemon-button>
+        <lemon-button @click="updateMessage">修改消息</lemon-button>
+        <lemon-button @click="appendCustomMessage">发送自定义消息</lemon-button>
         <a href="#help">如何创建自定义消息？</a>
         <br/>
         <lemon-button @click="updateContact">修改联系人信息</lemon-button>
@@ -38,7 +40,6 @@
         <lemon-button @click="changeMenuAvatarVisible"
           >切换头像显示</lemon-button
         >
-        <lemon-button @click="appendMessage">发送消息</lemon-button>
         <lemon-button @click="changeMessageNameVisible">切换聊天窗口内名字显示</lemon-button>
         <lemon-button @click="changeMessageTimeVisible">切换聊天窗口内时间显示</lemon-button>
         <lemon-button @click="changeTheme">切换主题，当前主题：{{this.theme}}</lemon-button>
@@ -440,21 +441,21 @@
         <tr>
           <td>removeMessage</td>
           <td>删除聊天消息</td>
-          <td>Function(Message.id,Contact.id)</td>
+          <td>Function(Message.id)</td>
           <td>-</td>
           <td></td>
         </tr>
         <tr>
           <td>updateMessage</td>
-          <td>修改一条消息</td>
+          <td>修改消息，根据 Message.id 查找聊天消息并覆盖传入的值（toContactId会被忽略）</td>
-          <td>Function(Message.id,Contact.id,Message)</td>
+          <td>Function(Message)</td>
           <td>-</td>
           <td></td>
         </tr>
         <tr>
-          <td>updateMessage</td>
+          <td>updateContact</td>
-          <td>修改联系人</td>
+          <td>修改联系人，根据 Contact.id 查找联系人并覆盖传入的值</td>
-          <td>Function(Contact.id,Contact)</td>
+          <td>Function(Contact)</td>
           <td>-</td>
           <td></td>
         </tr>
@@ -465,6 +466,20 @@
           <td>-</td>
           <td></td>
         </tr>
+        <tr>
+          <td>getCurrentContact</td>
+          <td>返回当前聊天窗口的联系人信息</td>
+          <td>Function()=>[Message]</td>
+          <td>-</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>getCurrentMessages</td>
+          <td>返回当前聊天窗口的所有消息</td>
+          <td>Function()=>[Message]</td>
+          <td>-</td>
+          <td></td>
+        </tr>
         <tr>
           <td>getContacts</td>
           <td>返回所有本地联系人</td>
@@ -612,7 +627,7 @@
         </tr>
         <tr>
           <td width="150">send</td>
-          <td width="350">当发送一条新消息时会触发该事件</td>
+          <td width="350">当发送新消息时会触发该事件</td>
           <td width="150">Message,Function(Message)：调用该函数完成消息发送，可以传入Message来改变消息内容，file：上传时的文件</td>
         </tr>
       </table>
@@ -801,7 +816,7 @@ export default {
     };
 
     const { IMUI } = this.$refs;
-    
+
     let contactList = [
       { ...contactData1 },
       { ...contactData2 },
@@ -1263,6 +1278,29 @@ export default {
     changeMessageTimeVisible(){
       this.hideMessageTime = !this.hideMessageTime;
     },
+    removeMessage(){
+      const {IMUI} = this.$refs;
+      const messages = IMUI.getCurrentMessages();
+      const id = messages[messages.length - 1].id;
+      if(messages.length > 0){
+        IMUI.removeMessage(id);
+      }
+    },
+    updateMessage(){
+      const {IMUI} = this.$refs;
+      const messages = IMUI.getCurrentMessages();
+      const id = messages[messages.length - 1].id;
+      if(messages.length > 0){
+        IMUI.updateMessage({
+          id,
+          status:'succeed',
+          type:'file',
+          fileName:'被修改成文件了.txt',
+          fileSize:'4200000',
+        });
+        IMUI.messageViewToBottom();
+      }
+    },
     appendCustomMessage(){
       const { IMUI } = this.$refs;
       const message ={
@@ -1346,6 +1384,7 @@ export default {
         let isEnd = false;
         if (instance.getMessages(instance.currentContactId).length + messages.length > 11) isEnd = true;
         next(messages, isEnd);
+
       },500)
     },
     handleChangeMenu() {

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.ac259e1d.css rel=preload as=style><link href=js/chunk-vendors.e4810482.js rel=preload as=script><link href=js/index.a2961444.js rel=preload as=script><link href=css/index.ac259e1d.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.a2961444.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.28bed5a5.css rel=preload as=style><link href=js/chunk-vendors.e4810482.js rel=preload as=script><link href=js/index.bd4312c8.js rel=preload as=script><link href=css/index.28bed5a5.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.bd4312c8.js></script></body></html>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "lemon-imui",
-  "version": "1.2.3",
+  "version": "1.3.0",
   "main": "dist/index.umd.min.js",
   "description": "基于 VUE2.0 的 IM 聊天组件",
   "homepage": "https://github.com/fanjyy/lemon-imui",

packages/components/index.vue

@@ -10,7 +10,7 @@ import lastContentRender from "../lastContentRender";
 
 import MemoryCache from "utils/cache/memory";
 
-const messages = {};
+const allMessages = {};
 const emojiMap = {};
 let renderDrawerContent = () => {};
 
@@ -89,17 +89,13 @@ export default {
   },
 
   render() {
-    const nodes = []
+    return this._renderWrapper([
-    if(this.simple == false){
+      this._renderMenu(),
-      nodes.push(...[
+      this._renderSidebarMessage(),
-        this._renderMenu(),
+      this._renderSidebarContact(),
-        this._renderSidebarMessage(),
+      this._renderContainer(),
-        this._renderSidebarContact(),
+      this._renderDrawer()
-      ])
+    ]);
-    }
-    nodes.push(this._renderContainer())
-    nodes.push(this._renderDrawer())
-    return this._renderWrapper(nodes);
   },
   created() {
     this.initMenus();
@@ -154,7 +150,7 @@ export default {
      * 新增一条消息
      */
     appendMessage(message,scrollToBottom = false) {
-      if(messages[message.toContactId] === undefined){
+      if(allMessages[message.toContactId] === undefined){
         this.updateContact(message.toContactId, {
           unread: "+1",
           lastSendTime: message.sendTime,
@@ -182,8 +178,7 @@ export default {
         message,
         (replaceMessage = { status: "succeed" }) => {
           next();
-          message = Object.assign(message, replaceMessage);
+          this.updateMessage(Object.assign(message, replaceMessage));
-          this.forceUpdateMessage(message.id);
         },
         file
       );
@@ -257,7 +252,8 @@ export default {
           class={[
             "lemon-wrapper",
             `lemon-wrapper--theme-${this.theme}`,
-            this.drawerVisible && "lemon-wrapper--drawer-show"
+            {'lemon-wrapper--simple':this.simple},
+            this.drawerVisible && "lemon-wrapper--drawer-show",
           ]}
         >
           {children}
@@ -513,9 +509,8 @@ export default {
         1: "push"
       }[t];
       if (!Array.isArray(data)) data = [data];
-      messages[contactId] = messages[contactId] || [];
+      allMessages[contactId] = allMessages[contactId] || [];
-      messages[contactId][type](...data);
+      allMessages[contactId][type](...data);
-      this.forceUpdateMessage();
     },
     /**
      * 设置最新消息DOM
@@ -542,8 +537,8 @@ export default {
       });
     },
     updateCurrentMessages(){
-      if(!messages[this.currentContactId]) messages[this.currentContactId] = []
+      if(!allMessages[this.currentContactId]) allMessages[this.currentContactId] = []
-      this.currentMessages = messages[this.currentContactId];
+      this.currentMessages = allMessages[this.currentContactId];
     },
     /**
      * 将当前聊天窗口滚动到底部
@@ -574,7 +569,7 @@ export default {
         this.$refs.messages.resetLoadState();
       }
 
-      if (!messages[contactId]) {
+      if (!allMessages[contactId]) {
         this.updateCurrentMessages();
         this._emitPullMessages(isEnd => this.messageViewToBottom());
       } else {
@@ -589,27 +584,28 @@ export default {
      * @param messageId 消息 id
      * @param contactId 联系人 id
      */
-    removeMessage(messageId, contactId) {
+    removeMessage(messageId) {
-      const index = this.findMessageIndexById(messageId, contactId);
+      const message = this.findMessage(messageId);
-      if (index !== -1) {
+      if(!message) return false;
-        messages[contactId].splice(index, 1);
+      const index = allMessages[message.toContactId].findIndex(({id}) => id == messageId);
-        this.forceUpdateMessage();
+      allMessages[message.toContactId].splice(index, 1);
-      }
+      return true;
     },
     /**
      * 修改聊天一条聊天消息
      * @param {Message} data 根据 data.id 查找聊天消息并覆盖传入的值
      * @param contactId 联系人 id
      */
-    updateMessage(messageId, contactId, data) {
+    updateMessage(message) {
-      const index = this.findMessageIndexById(messageId, contactId);
+      if(!message.id) return false;
-      if (index !== -1) {
+      delete message.toContactId;
-        messages[contactId][index] = Object.assign(
+      let historyMessage = this.findMessage(message.id);
-          messages[contactId][index],
+      if(!historyMessage) return false;
-          data
+      historyMessage = Object.assign(
-        );
+        historyMessage,
-        this.forceUpdateMessage(messageId);
+        message
-      }
+      );
+      return true;
     },
     /**
      * 手动更新对话消息
@@ -658,10 +654,6 @@ export default {
     initEditorTools(data){
       this.editorTools = data;
       this.$refs.editor.initTools(data);
-      // if(this.editorTools){
-      //   this.$refs.editor.initTools(data);
-      // }
-      //this.$refs.editor.$forceUpdate();
     },
     /**
      * 初始化左侧按钮
@@ -770,17 +762,20 @@ export default {
     findContactIndexById(contactId) {
       return this.contacts.findIndex(item => item.id == contactId);
     },
-    findMessageIndexById(messageId, contactId) {
+    findMessage(messageId){
-      const msg = messages[contactId];
+      return Object.values(allMessages).flat().find(({id})=>id == messageId);
-      if (isEmpty(msg)) {
-        return -1;
-      }
-      return msg.findIndex(item => item.id == messageId);
-    },
-    findMessageById(messageId, contactId) {
-      const index = this.findMessageIndexById(messageId, contactId);
-      if (index !== -1) return messages[contactId][index];
     },
+    // findMessageIndexById(messageId, contactId) {
+    //   const msg = messages[contactId];
+    //   if (isEmpty(msg)) {
+    //     return -1;
+    //   }
+    //   return msg.findIndex(item => item.id == messageId);
+    // },
+    // findMessageById(messageId, contactId) {
+    //   const index = this.findMessageIndexById(messageId, contactId);
+    //   if (index !== -1) return messages[contactId][index];
+    // },
     /**
      * 返回所有联系人
      * @return {Array<Contact>}
@@ -788,19 +783,19 @@ export default {
     getContacts() {
       return this.contacts;
     },
+    //返回当前聊天窗口联系人信息
+    getCurrentContact(){
+      return this.currentContact;
+    },
+    getCurrentMessages() {
+      return this.currentMessages;
+    },
     /**
      * 返回所有消息
      * @return {Object<Contact.id,Message>}
      */
     getMessages(contactId) {
-      return (contactId ? messages[contactId] : messages) || [];
+      return (contactId ? allMessages[contactId] : allMessages) || [];
-    },
-    /**
-     * 将自定义的HTML显示在主窗口内
-     */
-    openrenderContainer(vnode) {
-      //renderContainerQueue[this.activeSidebar] = vnode;
-      //this.$slots._renderContainer = vnode;
     },
     changeDrawer(render) {
       this.drawerVisible = !this.drawerVisible;
@@ -950,5 +945,8 @@ bezier = cubic-bezier(0.645, 0.045, 0.355, 1)
     &--active
       color #fff
       text-shadow 0 0 10px rgba(2,48,118,0.4)
-
+.lemon-wrapper--simple
+  .lemon-menu
+  .lemon-sidebar
+    display none
 </style>