修复自定义指令lemon-contextmenu报错的问题

packages/components/message/basic.vue

@@ -1,8 +1,17 @@
 <script>
+import { useScopedSlot } from "utils";
 export default {
   name: "lemonMessageBasic",
-  inject: ["IMUI"],
+  inject: {
+    IMUI: {
+      from: "IMUI",
+      default() {
+        return this;
+      }
+    }
+  },
   props: {
+    contextmenu: Array,
     message: {
       type: Object,
       default: () => {
@@ -14,7 +23,8 @@ export default {
       default: () => ""
     },
     reverse: Boolean,
-    hiddenTitle: Boolean
+    hideName: Boolean,
+    hideTime: Boolean
   },
   data() {
     return {};
@@ -25,9 +35,10 @@ export default {
       <div
         class={[
           "lemon-message",
+          `lemon-message--status-${status}`,
           {
             "lemon-message--reverse": this.reverse,
-            "lemon-message--hidden-title": this.hiddenTitle
+            "lemon-message--hide-name": this.hideName
           }
         ]}
       >
@@ -50,23 +61,50 @@ export default {
             >
               {fromUser.displayName}
             </span>
-            <span class="lemon-message__time">{this.timeFormat(sendTime)}</span>
+            {this.hideTime == true && (
+              <span
+                class="lemon-message__time"
+                on-click={e => {
+                  this._emitClick(e, "sendTime");
+                }}
+              >
+                {this.timeFormat(sendTime)}
+              </span>
+            )}
           </div>
-          <div
-            class="lemon-message__content"
-            on-click={e => {
-              this._emitClick(e, "content");
-            }}
-          >
-            {this.useScopedSlots("content", this.message)}
-          </div>
-          <div
-            class="lemon-message__status"
-            on-click={e => {
-              this._emitClick(e, "status");
-            }}
-          >
-            {this._renderStatue(status)}
+          <div class="lemon-message__content-flex">
+            <div
+              v-lemon-contextmenu_message={this.IMUI.contextmenu}
+              class="lemon-message__content"
+              on-click={e => {
+                this._emitClick(e, "content");
+              }}
+            >
+              {useScopedSlot(this.$scopedSlots["content"], null, this.message)}
+            </div>
+            <div class="lemon-message__content-after">
+              {useScopedSlot(
+                this.IMUI.$scopedSlots["message-after"],
+                null,
+                this.message
+              )}
+            </div>
+            <div
+              class="lemon-message__status"
+              on-click={e => {
+                this._emitClick(e, "status");
+              }}
+            >
+              <i class="lemon-icon-loading lemonani-spin" />
+              <i
+                class="lemon-icon-prompt"
+                title="重发消息"
+                style={{
+                  color: "#ff2525",
+                  cursor: "pointer"
+                }}
+              />
+            </div>
           </div>
         </div>
       </div>
@@ -78,29 +116,7 @@ export default {
   watch: {},
   methods: {
     _emitClick(e, key) {
-      this.IMUI.$emit("message-click", e, key, this.message);
-    },
-    _renderStatue(status) {
-      if (status == "going") {
-        return <i class="lemon-icon-loading lemonani-spin" />;
-      } else if (status == "failed") {
-        return (
-          <i
-            class="lemon-icon-prompt"
-            title="重发消息"
-            style={{
-              color: "#ff2525",
-              cursor: "pointer"
-            }}
-          />
-        );
-      }
-      return;
-    },
-    useScopedSlots(name, params, defVnode = "", context = this) {
-      return context.$scopedSlots[name]
-        ? context.$scopedSlots[name](params)
-        : defVnode;
+      this.IMUI.$emit("message-click", e, key, this.message, this.IMUI);
     }
   }
 };
@@ -118,8 +134,8 @@ arrow()
   display flex
   padding 10px 0
   +e(time)
-    color #bbb
-    padding 0 4px
+    color #b9b9b9
+    padding 0 5px
   +e(inner)
     position relative
   +e(avatar)
@@ -133,7 +149,9 @@ arrow()
     line-height 14px
     padding-bottom 6px
     user-select none
-    color #999
+    color #666
+  +e(content-flex)
+    display flex
   +e(content)
     font-size 14px
     line-height 20px
@@ -141,7 +159,7 @@ arrow()
     background #fff
     border-radius 4px
     position relative
-    margin 0 46px 0 0
+    margin 0
     img
     video
       background #e9e9e9
@@ -151,22 +169,49 @@ arrow()
       left -4px
       border-left none
       border-right-color #fff
+  +e(content-after)
+    display block
+    width 48px
+    height 36px
+    padding-left 6px
+    flex none
+    font-size 12px
+    color #aaa
+    overflow hidden
+    visibility hidden
   +e(status)
     position absolute
     top 23px
     right 20px
     color #aaa
     font-size 20px
+    .lemon-icon-loading
+    .lemon-icon-prompt
+      display none
+  +m(status-going)
+    .lemon-icon-loading
+      display inline-block
+  +m(status-failed)
+    .lemon-icon-prompt
+      display inline-block
+  +m(status-succeed)
+    +e(content-after)
+      visibility visible
   +m(reverse)
     flex-direction row-reverse
+    +e(content-flex)
+      flex-direction row-reverse
+    +e(content-after)
+      padding-right 6px
+      padding-left 0
+      text-align right
     +e(title)
       flex-direction row-reverse
     +e(status)
-      left 20px
+      left 26px
       right auto
     +e(content)
       background #35d863
-      margin 0 0 0 46px
       &:before
         arrow()
         left auto
@@ -178,9 +223,9 @@ arrow()
     +e(avatar)
       padding-right 0
       padding-left 10px
-  +m(hidden-title)
+  +m(hide-name)
     +e(status)
-      top 7px
+      top 3px
     +e(title)
       display none
     +e(content)

packages/components/message/event.vue

@@ -2,13 +2,24 @@
 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>

packages/components/message/text.vue

@@ -10,7 +10,7 @@ export default {
         props={{ ...this.$attrs }}
         scopedSlots={{
           content: props => {
-            const content = this.IMUI.replaceEmojiName(props.content);
+            const content = this.IMUI.emojiNameToImage(props.content);
             return <span domProps={{ innerHTML: content }} />;
           }
         }}
@@ -29,6 +29,8 @@ export default {
         height 18px
         display inline-block
         background transparent
+        position relative
+        top -1px
         padding 0 2px
         vertical-align middle
 </style>