Fix shortcut slot not show error (#115)

Author: imengyu

examples/views/BasicComponent.vue

@@ -42,6 +42,48 @@
       </context-menu-group>
     </context-menu-group>
     <context-menu-item label="Test dynamic change theme" :clickClose="false" @click="optionsComponent.theme = (optionsComponent.theme === 'dark' ? '' : 'dark')" />
+    <context-menu-group label="Test Menu item slot" @subMenuOpen="handleSubMenuOpen">
+      <template #icon>
+        <i class="iconfont icon-yidong"></i>
+      </template>
+      <context-menu-item>
+        <template #label>
+          Custom label slot <span class="test-tag">tag name</span>
+        </template>
+      </context-menu-item>
+      <context-menu-item>
+        <template #label>
+          Custom shortcut slot
+        </template>
+        <template #shortcut>
+          <span class="test-tag2">#shortcut: my</span>
+        </template>
+      </context-menu-item>
+      <context-menu-item>
+        <template #label>
+          Custom icon slot
+        </template>
+        <template #icon>
+          <i class="iconfont icon-terminal"></i>
+        </template>
+      </context-menu-item>
+      <context-menu-item checked>
+        <template #label>
+          Custom check slot
+        </template>
+        <template #check>
+          ✔
+        </template>
+      </context-menu-item>
+      <context-menu-item showRightArrow>
+        <template #label>
+          Custom rightArrow slot
+        </template>
+        <template #rightArrow>
+          >>
+        </template>
+      </context-menu-item>
+    </context-menu-group>
   </context-menu>
 
 
@@ -146,4 +188,19 @@ function changeLabelText() {
 function alertContextMenuItemClicked(name: string) {
   alert('You clicked ' + name + ' !');
 }
-</script>
+</script>
+
+<style>
+.test-tag {
+  background-color: #efefef;
+  padding: 5px;
+  border-radius: 5px;
+  margin-left: 10px;
+}
+.test-tag2 {
+  background-color: #ff9a9a;
+  padding: 5px;
+  border-radius: 25px;
+  margin-left: 10px;
+}
+</style>

examples/views/BasicUseage.vue

@@ -19,7 +19,7 @@
           <div @contextmenu="onContextMenu3($event, 'b')">Bottom Center</div>
           <div @contextmenu="onContextMenu3($event, 'br')">Bottom Right</div>
         </div>
-        <div class="box2" style="width: 170px; height: 140px" :tabindex="1" @contextmenu="onContextMenu($event)" @keydown="handleKeyPress">
+        <div class="box2" style="width: 270px; height: 80px; font-style: 15px;" :tabindex="1" @contextmenu="onContextMenu($event)" @keydown="handleKeyPress">
           Test keyboard event: Use arrow key to navigate menus.
           <br>
           Down div event catch: {{ testDownDivKey }}

library/ContextMenuItem.vue

@@ -42,7 +42,7 @@
           </slot>
         </div>
         <div class="mx-item-row">
-          <slot v-if="shortcut" name="shortcut">
+          <slot v-if="shortcut || $slots.shortcut" name="shortcut">
             <VNodeRender v-if="globalHasSlot('itemShortcutRender')" :vnode="() => globalRenderSlot('itemShortcutRender', getItemDataForChildren())" />
             <span class="mx-shortcut">{{ shortcut }}</span>
           </slot>