支持二级菜单

src/components/common/magic-context-menu.vue

@@ -1,8 +1,17 @@
 <template>
     <ul class="magic-context-menu none-select" :style="style" ref="element">
         <li v-for="(menu, key) in menus" :key="key" :class="{ divided: menu.divided }" @click.stop="() => {onMouseup(); menu.onClick && menu.onClick()}">
-            <span v-if="hasIcon" class="magic-context-menu-icon"><magic-icon :icon="menu.icon" v-if="menu.icon" size="12px"/></span>
+            <span v-if="menus.some(it => it.icon)" class="magic-context-menu-icon"><magic-icon :icon="menu.icon" v-if="menu.icon" size="12px"/></span>
             <label>{{ menu.label }}</label>
+            <template  v-if="menu.children">
+                <span class="magic-context-menu-icon right"><magic-icon icon="right" size="12px"/></span>
+                <ul class="magic-context-menu none-select">
+                    <li v-for="(item, key) in menu.children" :key="key" :class="{ divided: item.divided }" @click.stop="() => {onMouseup(); item.onClick && item.onClick()}">
+                        <span v-if="menu.children.some(it => it.icon)" class="magic-context-menu-icon"><magic-icon :icon="item.icon" v-if="item.icon" size="12px"/></span>
+                        <label>{{ item.label }}</label>
+                    </li>
+                </ul>
+            </template>
         </li>
     </ul>
 </template>
@@ -45,11 +54,6 @@ export default {
         onMouseup(){
             this.onDestory && this.onDestory()
         }
-    },
-    computed: {
-        hasIcon(){
-            return this.menus.some(it => it.icon)
-        }
     }
 }
 </script>
@@ -67,7 +71,8 @@ export default {
     cursor: pointer;
     display: flex;
 }
-.magic-context-menu li > * {
+.magic-context-menu li > span,
+.magic-context-menu li > label {
     cursor: pointer;
 	white-space: pre;
 }
@@ -82,9 +87,25 @@ export default {
 }
 .magic-context-menu li:hover{
     background-color: var(--select-option-hover-background-color);
+}
+.magic-context-menu li:hover > span,
+.magic-context-menu li:hover > label {
     color: var(--select-option-hover-color);
 }
-.magic-context-menu li:hover :deep(.magic-icon){
+.magic-context-menu li:hover > span :deep(.magic-icon){
     fill: var(--select-option-hover-color);
 }
+.magic-context-menu li:hover .magic-context-menu{
+    display: block;
+}
+.magic-context-menu li .magic-context-menu{
+    left: 100%;
+    margin-top: -1px;
+    display: none;
+}
+.magic-context-menu li .magic-context-menu-icon.right{
+    float: right;
+    margin-right: 0px;
+    margin-left: 5px;
+}
 </style>