v1.7.0

dist/index.common.js

@@ -6951,6 +6951,7 @@ var editor_component = normalizeComponent(
 
 
 
+
 /* harmony default export */ var messagesvue_type_script_lang_js_ = ({
   name: "LemonMessages",
   components: {},
@@ -6970,6 +6971,13 @@ var editor_component = normalizeComponent(
         return hoursTimeFormat(val);
       }
     },
+    loadingText: {
+      type: [String, Function]
+    },
+    loadendText: {
+      type: [String, Function],
+      default: "暂无更多消息"
+    },
     messages: {
       type: Array,
       default: function _default() {
@@ -6978,6 +6986,7 @@ var editor_component = normalizeComponent(
     }
   },
   data: function data() {
+    this._lockScroll = false;
     return {
       _loading: false,
       _loadend: false
@@ -6995,7 +7004,13 @@ var editor_component = normalizeComponent(
       }
     }, [h("div", {
       "class": ["lemon-messages__load", "lemon-messages__load--".concat(this._loadend ? "end" : "ing")]
-    }, [this._loadend ? this._renderLoadEnd() : this._renderLoading()]), this.messages.map(function (message, index) {
+    }, [h("span", {
+      "class": "lemon-messages__loadend"
+    }, [isString(this.loadendText) ? this.loadendText : this.loadendText()]), h("span", {
+      "class": "lemon-messages__loading"
+    }, [this.loadingText ? isString(this.loadingText) ? this.loadingText : this.loadingText() : h("i", {
+      "class": "lemon-icon-loading lemonani-spin"
+    })])]), this.messages.map(function (message, index) {
       var node = [];
       var tagName = "lemon-message-".concat(message.type);
       var prev = _this.messages[index - 1];
@@ -7044,48 +7059,52 @@ var editor_component = normalizeComponent(
   },
   watch: {},
   methods: {
-    _renderLoading: function _renderLoading() {
-      var h = this.$createElement;
-      return h("i", {
-        "class": "lemon-icon-loading lemonani-spin"
-      });
-    },
-    _renderLoadEnd: function _renderLoadEnd() {
-      var h = this.$createElement;
-      return h("span", ["\u6682\u65E0\u66F4\u591A\u6D88\u606F"]);
-    },
     loaded: function loaded() {
       this._loadend = true;
       this.$forceUpdate();
     },
     resetLoadState: function resetLoadState() {
+      var _this2 = this;
+
+      this._lockScroll = true;
       this._loading = false;
       this._loadend = false;
+      setTimeout(function () {
+        _this2._lockScroll = false;
+      }, 200);
     },
     _handleScroll: function () {
       var _handleScroll2 = _asyncToGenerator(
       /*#__PURE__*/
       regeneratorRuntime.mark(function _callee2(e) {
-        var _this2 = this;
+        var _this3 = this;
 
         var target, hst;
         return regeneratorRuntime.wrap(function _callee2$(_context2) {
           while (1) {
             switch (_context2.prev = _context2.next) {
               case 0:
+                if (!this._lockScroll) {
+                  _context2.next = 2;
+                  break;
+                }
+
+                return _context2.abrupt("return");
+
+              case 2:
                 target = e.target;
                 contextmenu.hide();
 
                 if (!(target.scrollTop == 0 && this._loading == false && this._loadend == false)) {
-                  _context2.next = 8;
+                  _context2.next = 10;
                   break;
                 }
 
                 this._loading = true;
-                _context2.next = 6;
+                _context2.next = 8;
                 return this.$nextTick();
 
-              case 6:
+              case 8:
                 hst = target.scrollHeight;
                 this.$emit("reach-top",
                 /*#__PURE__*/
@@ -7098,12 +7117,12 @@ var editor_component = normalizeComponent(
                         switch (_context.prev = _context.next) {
                           case 0:
                             _context.next = 2;
-                            return _this2.$nextTick();
+                            return _this3.$nextTick();
 
                           case 2:
                             target.scrollTop = target.scrollHeight - hst;
-                            _this2._loading = false;
+                            _this3._loading = false;
-                            _this2._loadend = !!isEnd;
+                            _this3._loadend = !!isEnd;
 
                           case 5:
                           case "end":
@@ -7118,7 +7137,7 @@ var editor_component = normalizeComponent(
                   };
                 }());
 
-              case 8:
+              case 10:
               case "end":
                 return _context2.stop();
             }
@@ -7818,6 +7837,8 @@ var renderDrawerContent = function renderDrawerContent() {};
       type: Boolean,
       default: false
     },
+    loadingText: [String, Function],
+    loadendText: [String, Function],
 
     /**
      * 消息时间格式化规则
@@ -8312,6 +8333,8 @@ var renderDrawerContent = function renderDrawerContent() {};
       }, [h("lemon-messages", {
         "ref": "messages",
         "attrs": {
+          "loading-text": this.loadingText,
+          "loadend-text": this.loadendText,
           "hide-time": this.hideMessageTime,
           "hide-name": this.hideMessageName,
           "time-format": this.messageTimeFormat,
@@ -8856,6 +8879,23 @@ var renderDrawerContent = function renderDrawerContent() {};
       return this.$refs.editor.getFormatValue();
     },
 
+    /**
+     * 清空某个联系人的消息，切换到该联系人时会重新触发pull-messages事件
+     */
+    clearMessages: function clearMessages(contactId) {
+      if (contactId) {
+        delete allMessages[contactId];
+        this.CacheMessageLoaded.remove(contactId);
+        this.CacheDraft.remove(contactId);
+      } else {
+        allMessages = {};
+        this.CacheMessageLoaded.remove();
+        this.CacheDraft.remove();
+      }
+
+      return true;
+    },
+
     /**
      * 返回所有消息
      * @return {Object<Contact.id,Message>}

dist/index.umd.js

@@ -6960,6 +6960,7 @@ var editor_component = normalizeComponent(
 
 
 
+
 /* harmony default export */ var messagesvue_type_script_lang_js_ = ({
   name: "LemonMessages",
   components: {},
@@ -6979,6 +6980,13 @@ var editor_component = normalizeComponent(
         return hoursTimeFormat(val);
       }
     },
+    loadingText: {
+      type: [String, Function]
+    },
+    loadendText: {
+      type: [String, Function],
+      default: "暂无更多消息"
+    },
     messages: {
       type: Array,
       default: function _default() {
@@ -6987,6 +6995,7 @@ var editor_component = normalizeComponent(
     }
   },
   data: function data() {
+    this._lockScroll = false;
     return {
       _loading: false,
       _loadend: false
@@ -7004,7 +7013,13 @@ var editor_component = normalizeComponent(
       }
     }, [h("div", {
       "class": ["lemon-messages__load", "lemon-messages__load--".concat(this._loadend ? "end" : "ing")]
-    }, [this._loadend ? this._renderLoadEnd() : this._renderLoading()]), this.messages.map(function (message, index) {
+    }, [h("span", {
+      "class": "lemon-messages__loadend"
+    }, [isString(this.loadendText) ? this.loadendText : this.loadendText()]), h("span", {
+      "class": "lemon-messages__loading"
+    }, [this.loadingText ? isString(this.loadingText) ? this.loadingText : this.loadingText() : h("i", {
+      "class": "lemon-icon-loading lemonani-spin"
+    })])]), this.messages.map(function (message, index) {
       var node = [];
       var tagName = "lemon-message-".concat(message.type);
       var prev = _this.messages[index - 1];
@@ -7053,48 +7068,52 @@ var editor_component = normalizeComponent(
   },
   watch: {},
   methods: {
-    _renderLoading: function _renderLoading() {
-      var h = this.$createElement;
-      return h("i", {
-        "class": "lemon-icon-loading lemonani-spin"
-      });
-    },
-    _renderLoadEnd: function _renderLoadEnd() {
-      var h = this.$createElement;
-      return h("span", ["\u6682\u65E0\u66F4\u591A\u6D88\u606F"]);
-    },
     loaded: function loaded() {
       this._loadend = true;
       this.$forceUpdate();
     },
     resetLoadState: function resetLoadState() {
+      var _this2 = this;
+
+      this._lockScroll = true;
       this._loading = false;
       this._loadend = false;
+      setTimeout(function () {
+        _this2._lockScroll = false;
+      }, 200);
     },
     _handleScroll: function () {
       var _handleScroll2 = _asyncToGenerator(
       /*#__PURE__*/
       regeneratorRuntime.mark(function _callee2(e) {
-        var _this2 = this;
+        var _this3 = this;
 
         var target, hst;
         return regeneratorRuntime.wrap(function _callee2$(_context2) {
           while (1) {
             switch (_context2.prev = _context2.next) {
               case 0:
+                if (!this._lockScroll) {
+                  _context2.next = 2;
+                  break;
+                }
+
+                return _context2.abrupt("return");
+
+              case 2:
                 target = e.target;
                 contextmenu.hide();
 
                 if (!(target.scrollTop == 0 && this._loading == false && this._loadend == false)) {
-                  _context2.next = 8;
+                  _context2.next = 10;
                   break;
                 }
 
                 this._loading = true;
-                _context2.next = 6;
+                _context2.next = 8;
                 return this.$nextTick();
 
-              case 6:
+              case 8:
                 hst = target.scrollHeight;
                 this.$emit("reach-top",
                 /*#__PURE__*/
@@ -7107,12 +7126,12 @@ var editor_component = normalizeComponent(
                         switch (_context.prev = _context.next) {
                           case 0:
                             _context.next = 2;
-                            return _this2.$nextTick();
+                            return _this3.$nextTick();
 
                           case 2:
                             target.scrollTop = target.scrollHeight - hst;
-                            _this2._loading = false;
+                            _this3._loading = false;
-                            _this2._loadend = !!isEnd;
+                            _this3._loadend = !!isEnd;
 
                           case 5:
                           case "end":
@@ -7127,7 +7146,7 @@ var editor_component = normalizeComponent(
                   };
                 }());
 
-              case 8:
+              case 10:
               case "end":
                 return _context2.stop();
             }
@@ -7827,6 +7846,8 @@ var renderDrawerContent = function renderDrawerContent() {};
       type: Boolean,
       default: false
     },
+    loadingText: [String, Function],
+    loadendText: [String, Function],
 
     /**
      * 消息时间格式化规则
@@ -8321,6 +8342,8 @@ var renderDrawerContent = function renderDrawerContent() {};
       }, [h("lemon-messages", {
         "ref": "messages",
         "attrs": {
+          "loading-text": this.loadingText,
+          "loadend-text": this.loadendText,
           "hide-time": this.hideMessageTime,
           "hide-name": this.hideMessageName,
           "time-format": this.messageTimeFormat,
@@ -8865,6 +8888,23 @@ var renderDrawerContent = function renderDrawerContent() {};
       return this.$refs.editor.getFormatValue();
     },
 
+    /**
+     * 清空某个联系人的消息，切换到该联系人时会重新触发pull-messages事件
+     */
+    clearMessages: function clearMessages(contactId) {
+      if (contactId) {
+        delete allMessages[contactId];
+        this.CacheMessageLoaded.remove(contactId);
+        this.CacheDraft.remove(contactId);
+      } else {
+        allMessages = {};
+        this.CacheMessageLoaded.remove();
+        this.CacheDraft.remove();
+      }
+
+      return true;
+    },
+
     /**
      * 返回所有消息
      * @return {Object<Contact.id,Message>}

examples/App.vue

@@ -396,6 +396,27 @@
         <td width="100">default</td>
         <td></td>
       </tr>
+      <tr>
+        <td width="150">theme</td>
+        <td width="350">主题</td>
+        <td width="150">default | blue</td>
+        <td width="100">default</td>
+        <td></td>
+      </tr>
+      <tr>
+        <td width="150">loadingText</td>
+        <td width="350">消息加载文字</td>
+        <td width="150">String | Function</td>
+        <td width="100"></td>
+        <td></td>
+      </tr>
+      <tr>
+        <td width="150">loadendText</td>
+        <td width="350">消息加载结束文字</td>
+        <td width="150">String | Function</td>
+        <td width="100">暂无更多消息</td>
+        <td></td>
+      </tr>
       <tr>
         <td width="150">avatarCricle</td>
         <td width="350">使用圆形头像</td>
@@ -594,6 +615,15 @@
         <td>-</td>
         <td></td>
       </tr>
+      <tr>
+        <td>clearMessages</td>
+        <td>
+          清空某个联系人的本地消息记录，重新切换到该联系人时会再次触发pull-messages事件，Contact.id为空则清空所有
+        </td>
+        <td>Function(Contact.id)=>Boolean</td>
+        <td>-</td>
+        <td></td>
+      </tr>
       <tr>
         <td>getMessages</td>
         <td>返回所有本地消息，传入 Contact.id 则只返回与该联系人的消息</td>

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.6fdb6837.css rel=preload as=style><link href=js/chunk-vendors.e4810482.js rel=preload as=script><link href=js/index.94c3664b.js rel=preload as=script><link href=css/index.6fdb6837.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.94c3664b.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.5b3d3f23.css rel=preload as=style><link href=js/chunk-vendors.e4810482.js rel=preload as=script><link href=js/index.7d134a38.js rel=preload as=script><link href=css/index.5b3d3f23.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.7d134a38.js></script></body></html>

examples/qq/index.vue

@@ -151,7 +151,10 @@ export default {
       IMUI.openDrawer(params);
     },
     handlePullMessages(contact, next) {
-      next(MessagesData[contact.id], true);
+      const { IMUI } = this.$refs;
+      setTimeout(() => {
+        next(MessagesData[contact.id], true);
+      }, 3000);
     },
     handleChangeContact() {},
     handleSend(message, next, file) {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "lemon-imui",
-  "version": "1.6.15",
+  "version": "1.7.0",
   "main": "dist/index.umd.min.js",
   "description": "基于 VUE2.0 的 IM 聊天组件",
   "homepage": "http://june000.gitee.io/lemon-im/",

packages/components/index.vue

@@ -16,7 +16,7 @@ import lastContentRender from "../lastContentRender";
 
 import MemoryCache from "utils/cache/memory";
 
-const allMessages = {};
+let allMessages = {};
 const emojiMap = {};
 const toPx = val => {
   return isString(val) ? val : `${val}px`;
@@ -51,6 +51,8 @@ export default {
       type: Boolean,
       default: false,
     },
+    loadingText: [String, Function],
+    loadendText: [String, Function],
     /**
      * 消息时间格式化规则
      */
@@ -495,6 +497,8 @@ export default {
             <div class="lemon-vessel__left">
               <lemon-messages
                 ref="messages"
+                loading-text={this.loadingText}
+                loadend-text={this.loadendText}
                 hide-time={this.hideMessageTime}
                 hide-name={this.hideMessageName}
                 time-format={this.messageTimeFormat}
@@ -956,6 +960,21 @@ export default {
     getEditorValue() {
       return this.$refs.editor.getFormatValue();
     },
+    /**
+     * 清空某个联系人的消息，切换到该联系人时会重新触发pull-messages事件
+     */
+    clearMessages(contactId) {
+      if (contactId) {
+        delete allMessages[contactId];
+        this.CacheMessageLoaded.remove(contactId);
+        this.CacheDraft.remove(contactId);
+      } else {
+        allMessages = {};
+        this.CacheMessageLoaded.remove();
+        this.CacheDraft.remove();
+      }
+      return true;
+    },
     /**
      * 返回所有消息
      * @return {Object<Contact.id,Message>}

packages/components/messages.vue

@@ -1,5 +1,6 @@
 <script>
 import { hoursTimeFormat } from "utils";
+import { isString } from "utils/validate";
 import contextmenu from "../directives/contextmenu";
 export default {
   name: "LemonMessages",
@@ -20,12 +21,20 @@ export default {
         return hoursTimeFormat(val);
       },
     },
+    loadingText: {
+      type: [String, Function],
+    },
+    loadendText: {
+      type: [String, Function],
+      default: "暂无更多消息",
+    },
     messages: {
       type: Array,
       default: () => [],
     },
   },
   data() {
+    this._lockScroll = false;
     return {
       _loading: false,
       _loadend: false,
@@ -40,7 +49,20 @@ export default {
             `lemon-messages__load--${this._loadend ? "end" : "ing"}`,
           ]}
         >
-          {this._loadend ? this._renderLoadEnd() : this._renderLoading()}
+          <span class="lemon-messages__loadend">
+            {isString(this.loadendText) ? this.loadendText : this.loadendText()}
+          </span>
+          <span class="lemon-messages__loading">
+            {this.loadingText ? (
+              isString(this.loadingText) ? (
+                this.loadingText
+              ) : (
+                this.loadingText()
+              )
+            ) : (
+              <i class="lemon-icon-loading lemonani-spin" />
+            )}
+          </span>
         </div>
         {this.messages.map((message, index) => {
           const node = [];
@@ -89,21 +111,20 @@ export default {
   },
   watch: {},
   methods: {
-    _renderLoading() {
-      return <i class="lemon-icon-loading lemonani-spin" />;
-    },
-    _renderLoadEnd() {
-      return <span>暂无更多消息</span>;
-    },
     loaded() {
       this._loadend = true;
       this.$forceUpdate();
     },
     resetLoadState() {
+      this._lockScroll = true;
       this._loading = false;
       this._loadend = false;
+      setTimeout(() => {
+        this._lockScroll = false;
+      }, 200);
     },
     async _handleScroll(e) {
+      if (this._lockScroll) return;
       const { target } = e;
       contextmenu.hide();
       if (
@@ -152,6 +173,15 @@ export default {
     text-align center
     color #999
     line-height 30px
+    .lemon-messages__loading
+    .lemon-messages__loadend
+      display none
     +m(ing)
-      font-size 22px
+      .lemon-icon-loading
+        font-size 22px
+      .lemon-messages__loading
+        display block
+    +m(end)
+      .lemon-messages__loadend
+        display block
 </style>