增加消息类型：event

dist/index.common.js

@@ -6820,17 +6820,27 @@ var editor_component = normalizeComponent(
         }])));
       }
 
-      node.push(h(tagName, helper_default()([{
-        "ref": "message",
-        "refInFor": true
-      }, {
-        "attrs": {
+      var attrs;
+
+      if (message.type == 'event') {
+        attrs = {
+          message: message
+        };
+      } else {
+        attrs = {
           timeFormat: _this.timeFormat,
           message: message,
           reverse: _this.reverseUserId == message.fromUser.id,
           hideTime: _this.hideTime,
           hideName: _this.hideName
-        }
+        };
+      }
+
+      node.push(h(tagName, helper_default()([{
+        "ref": "message",
+        "refInFor": true
+      }, {
+        "attrs": attrs
       }])));
       return node;
     })]);
@@ -7325,14 +7335,27 @@ var file_component = normalizeComponent(
 /* harmony default export */ var eventvue_type_script_lang_js_ = ({
   name: "lemonMessageEvent",
   inheritAttrs: false,
+  inject: ["IMUI"],
   render: function render() {
+    var _this = this;
+
     var h = arguments[0];
     var content = this.$attrs.message.content;
     return h("div", {
       "class": "lemon-message lemon-message-event"
     }, [h("span", {
-      "class": "lemon-message-event__content"
+      "class": "lemon-message-event__content",
+      "on": {
+        "click": function click(e) {
+          return _this._emitClick(e, "content");
+        }
+      }
     }, [content])]);
+  },
+  methods: {
+    _emitClick: function _emitClick(e, key) {
+      this.IMUI.$emit("message-click", e, key, this.$attrs.message, this.IMUI);
+    }
   }
 });
 // CONCATENATED MODULE: ./packages/components/message/event.vue?vue&type=script&lang=js&
@@ -7442,6 +7465,9 @@ var CONTACT_TYPE = ["many", "single"];
   },
   text: function text(message) {
     return this.replaceEmojiName(message.content);
+  },
+  event: function event(message) {
+    return '[通知]';
   }
 });
 // CONCATENATED MODULE: ./node_modules/@babel/runtime-corejs2/helpers/esm/classCallCheck.js
@@ -8111,6 +8137,12 @@ var renderDrawerContent = function renderDrawerContent() {};
       packages_lastContentRender[messageType] = render;
     },
     lastContentRender: function lastContentRender(message) {
+      if (!isFunction(packages_lastContentRender[message.type])) {
+        console.error("not found '".concat(message.type, "' of the latest message renderer,try to use \u2018setLastContentRender()\u2019"));
+        return '';
+      }
+
+      ;
       return packages_lastContentRender[message.type].call(this, message);
     },
 

dist/index.umd.js

@@ -6829,17 +6829,27 @@ var editor_component = normalizeComponent(
         }])));
       }
 
-      node.push(h(tagName, helper_default()([{
-        "ref": "message",
-        "refInFor": true
-      }, {
-        "attrs": {
+      var attrs;
+
+      if (message.type == 'event') {
+        attrs = {
+          message: message
+        };
+      } else {
+        attrs = {
           timeFormat: _this.timeFormat,
           message: message,
           reverse: _this.reverseUserId == message.fromUser.id,
           hideTime: _this.hideTime,
           hideName: _this.hideName
-        }
+        };
+      }
+
+      node.push(h(tagName, helper_default()([{
+        "ref": "message",
+        "refInFor": true
+      }, {
+        "attrs": attrs
       }])));
       return node;
     })]);
@@ -7334,14 +7344,27 @@ var file_component = normalizeComponent(
 /* harmony default export */ var eventvue_type_script_lang_js_ = ({
   name: "lemonMessageEvent",
   inheritAttrs: false,
+  inject: ["IMUI"],
   render: function render() {
+    var _this = this;
+
     var h = arguments[0];
     var content = this.$attrs.message.content;
     return h("div", {
       "class": "lemon-message lemon-message-event"
     }, [h("span", {
-      "class": "lemon-message-event__content"
+      "class": "lemon-message-event__content",
+      "on": {
+        "click": function click(e) {
+          return _this._emitClick(e, "content");
+        }
+      }
     }, [content])]);
+  },
+  methods: {
+    _emitClick: function _emitClick(e, key) {
+      this.IMUI.$emit("message-click", e, key, this.$attrs.message, this.IMUI);
+    }
   }
 });
 // CONCATENATED MODULE: ./packages/components/message/event.vue?vue&type=script&lang=js&
@@ -7451,6 +7474,9 @@ var CONTACT_TYPE = ["many", "single"];
   },
   text: function text(message) {
     return this.replaceEmojiName(message.content);
+  },
+  event: function event(message) {
+    return '[通知]';
   }
 });
 // CONCATENATED MODULE: ./node_modules/@babel/runtime-corejs2/helpers/esm/classCallCheck.js
@@ -8120,6 +8146,12 @@ var renderDrawerContent = function renderDrawerContent() {};
       packages_lastContentRender[messageType] = render;
     },
     lastContentRender: function lastContentRender(message) {
+      if (!isFunction(packages_lastContentRender[message.type])) {
+        console.error("not found '".concat(message.type, "' of the latest message renderer,try to use \u2018setLastContentRender()\u2019"));
+        return '';
+      }
+
+      ;
       return packages_lastContentRender[message.type].call(this, message);
     },
 

examples/App.vue

@@ -30,6 +30,7 @@
       <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="appendEventMessage">发送 event 消息</lemon-button>
         <lemon-button @click="removeMessage">删除最近一条消息</lemon-button>
         <lemon-button @click="updateMessage">修改消息</lemon-button>
         <lemon-button @click="appendCustomMessage">发送自定义消息</lemon-button>
@@ -200,8 +201,8 @@
         <tr>
         <tr>          
           <td>type</td>
-          <td>消息类型：file | image | text</td>
-          <td>String</td>
+          <td>消息类型：file | image | text | event</td>
+          <td>String | Vnode</td>
           <td>-</td>
           <td></td>
         </tr>
@@ -634,7 +635,7 @@
 
       <div class="title" id="help">如何创建自定义消息？</div>
       <div>
-        <p>Lemon-IMUI 目前内置了file、image、text三种消息类型，在实际应用当中肯定是不够的哦，咋办？没事的，我们继续往下see。<br/>要创建自定义消息首先要确定新消息的 Message 结构。</p>
+        <p>Lemon-IMUI 目前内置了file、image、text、event四种消息类型，在实际应用当中肯定是不够的哦，咋办？没事的，我们继续往下see。<br/>要创建自定义消息首先要确定新消息的 Message 结构。</p>
         <pre>
 {
   //值为 voice，用于解析的组件 name 必须为 lemonMessageVoice
@@ -817,6 +818,11 @@ export default {
 
     const { IMUI } = this.$refs;
 
+
+    IMUI.setLastContentRender('event',(message)=>{
+      return '[有人邀请你加入群组]';
+    });
+
     let contactList = [
       { ...contactData1 },
       { ...contactData2 },
@@ -1326,6 +1332,17 @@ export default {
       };
       IMUI.appendMessage(message,true);
     },
+    appendEventMessage(){
+      const { IMUI } = this.$refs;
+      const message = {
+        id:generateRandId(),
+        type:'event',
+        content:<span>邀请你加入群聊 <b style="color:#333;cursor:pointer" on-click={()=>alert('OK')}>接受</b></span>,
+        toContactId:'contact-3',
+        sendTime:getTime(),
+      };
+      IMUI.appendMessage(message,true);
+    },
     updateContact() {
       this.$refs.IMUI.updateContact("contact-3", {
         unread: 10,

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.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>
+<!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.f559817e.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.f559817e.js></script></body></html>

package.json

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

packages/components/index.vue

@@ -521,6 +521,10 @@ export default {
       lastContentRender[messageType] = render;
     },
     lastContentRender(message) {
+      if(!isFunction(lastContentRender[message.type])){
+        console.error(`not found '${message.type}' of the latest message renderer,try to use ‘setLastContentRender()’`);
+        return '';
+      };
       return lastContentRender[message.type].call(this, message);
     },
     /**

packages/components/message/event.vue

@@ -2,14 +2,20 @@
 export default {
   name: "lemonMessageEvent",
   inheritAttrs: false,
+  inject: ["IMUI"],
   render() {
     const { content } = this.$attrs.message;
     return (
       <div class="lemon-message lemon-message-event">
-        <span class="lemon-message-event__content">{content}</span>
+        <span class="lemon-message-event__content" on-click={e => this._emitClick(e, "content")}>{content}</span>
       </div>
     );
-  }
+  },
+  methods:{
+    _emitClick(e, key) {
+      this.IMUI.$emit("message-click", e, key, this.$attrs.message,this.IMUI);
+    },
+  },
 };
 </script>
 <style lang="stylus">

packages/components/messages.vue

@@ -62,17 +62,24 @@ export default {
               />
             );
           }
+
+          let attrs;
+          if(message.type == 'event'){
+            attrs = {message: message};
+          }else{
+            attrs = {
+              timeFormat: this.timeFormat,
+              message: message,
+              reverse: this.reverseUserId == message.fromUser.id,
+              hideTime:this.hideTime,
+              hideName: this.hideName
+            }
+          }
           node.push(
             <tagName
               ref="message"
               refInFor={true}
-              attrs={{
-                timeFormat: this.timeFormat,
-                message: message,
-                reverse: this.reverseUserId == message.fromUser.id,
-                hideTime:this.hideTime,
-                hideName: this.hideName
-              }}
+              attrs={attrs}
             />
           );
           return node;

packages/lastContentRender.js

@@ -7,5 +7,8 @@ export default {
   },
   text(message) {
     return this.replaceEmojiName(message.content);
-  }
+  },
+  event(message){
+    return '[通知]';
+  },
 };