fix(editor): 右键菜单隐藏逻辑有问题

packages/editor/src/components/ContentMenu.vue

@@ -11,13 +11,19 @@
       ></tool-button>
     </div>
     <teleport to="body">
-      <content-menu class="sub-menu" ref="subMenu" :menu-data="subMenuData"></content-menu>
+      <content-menu
+        class="sub-menu"
+        ref="subMenu"
+        :menu-data="subMenuData"
+        :is-sub-menu="true"
+        @hide="hide"
+      ></content-menu>
     </teleport>
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, nextTick, onMounted, PropType, ref } from 'vue';
+import { defineComponent, nextTick, onMounted, onUnmounted, PropType, ref } from 'vue';
 
 import { MenuButton, MenuItem } from '@editor/type';
 
@@ -31,9 +37,16 @@ export default defineComponent({
       type: Array as PropType<MenuItem[]>,
       default: () => [],
     },
+
+    isSubMenu: {
+      type: Boolean,
+      default: false,
+    },
   },
 
-  setup() {
+  emits: ['hide', 'show'],
+
+  setup(props, { emit }) {
     const menu = ref<HTMLDivElement>();
     const subMenu = ref<any>();
     const visible = ref(false);
@@ -44,20 +57,35 @@ export default defineComponent({
     });
 
     const hide = () => {
+      if (!visible.value) return;
+
       visible.value = false;
+      subMenu.value?.hide();
+
+      emit('hide');
     };
 
-    onMounted(() => {
+    const hideHandler = (e: MouseEvent) => {
-      globalThis.addEventListener(
+      const target = e.target as HTMLElement | undefined;
-        'mouseup',
+      if (!visible.value || !target) {
-        (e: MouseEvent) => {
+        return;
-          if (!visible.value || (e.target && menu.value?.contains(e.target as HTMLElement))) {
+      }
+      if (menu.value?.contains(target) || subMenu.value?.$el?.contains(target)) {
         return;
       }
       hide();
-        },
+    };
-        true,
+
-      );
+    onMounted(() => {
+      if (props.isSubMenu) return;
+
+      globalThis.addEventListener('mousedown', hideHandler, true);
+    });
+
+    onUnmounted(() => {
+      if (props.isSubMenu) return;
+
+      globalThis.removeEventListener('mousedown', hideHandler, true);
     });
 
     return {
@@ -70,6 +98,8 @@ export default defineComponent({
       hide,
 
       show(e: MouseEvent) {
+        // 加settimeout是以为，如果菜单中的按钮监听的是mouseup，那么菜单显示出来时鼠标如果正好在菜单上就会马上触发按钮的mouseup
+        setTimeout(() => {
           visible.value = true;
 
           nextTick(() => {
@@ -82,9 +112,12 @@ export default defineComponent({
 
             menuStyle.value = {
               top: `${top}px`,
-            left: `${e.clientX + 2}px`,
+              left: `${e.clientX}px`,
             };
+
+            emit('show');
           });
+        }, 300);
       },
 
       showSubMenu(item: MenuItem) {