From c99663a3e8aa1730e3849d200dd9b441ef821c5a Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Fri, 3 Jun 2022 22:11:54 +0800
Subject: [PATCH] =?UTF-8?q?fix(editor):=20=E5=8F=B3=E9=94=AE=E8=8F=9C?=
 =?UTF-8?q?=E5=8D=95=E9=9A=90=E8=97=8F=E9=80=BB=E8=BE=91=E6=9C=89=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../editor/src/components/ContentMenu.vue     | 83 +++++++++++++------
 1 file changed, 58 insertions(+), 25 deletions(-)

diff --git a/packages/editor/src/components/ContentMenu.vue b/packages/editor/src/components/ContentMenu.vue
index 6b8f5a29..4adf5df8 100644
--- a/packages/editor/src/components/ContentMenu.vue
+++ b/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');
+    };
+
+    const hideHandler = (e: MouseEvent) => {
+      const target = e.target as HTMLElement | undefined;
+      if (!visible.value || !target) {
+        return;
+      }
+      if (menu.value?.contains(target) || subMenu.value?.$el?.contains(target)) {
+        return;
+      }
+      hide();
     };
 
     onMounted(() => {
-      globalThis.addEventListener(
-        'mouseup',
-        (e: MouseEvent) => {
-          if (!visible.value || (e.target && menu.value?.contains(e.target as HTMLElement))) {
-            return;
-          }
-          hide();
-        },
-        true,
-      );
+      if (props.isSubMenu) return;
+
+      globalThis.addEventListener('mousedown', hideHandler, true);
+    });
+
+    onUnmounted(() => {
+      if (props.isSubMenu) return;
+
+      globalThis.removeEventListener('mousedown', hideHandler, true);
     });
 
     return {
@@ -70,21 +98,26 @@ export default defineComponent({
       hide,
 
       show(e: MouseEvent) {
-        visible.value = true;
+        // 加settimeout是以为，如果菜单中的按钮监听的是mouseup，那么菜单显示出来时鼠标如果正好在菜单上就会马上触发按钮的mouseup
+        setTimeout(() => {
+          visible.value = true;
 
-        nextTick(() => {
-          const menuHeight = menu.value?.clientHeight || 0;
+          nextTick(() => {
+            const menuHeight = menu.value?.clientHeight || 0;
 
-          let top = e.clientY;
-          if (menuHeight + e.clientY > document.body.clientHeight) {
-            top = document.body.clientHeight - menuHeight;
-          }
+            let top = e.clientY;
+            if (menuHeight + e.clientY > document.body.clientHeight) {
+              top = document.body.clientHeight - menuHeight;
+            }
 
-          menuStyle.value = {
-            top: `${top}px`,
-            left: `${e.clientX + 2}px`,
-          };
-        });
+            menuStyle.value = {
+              top: `${top}px`,
+              left: `${e.clientX}px`,
+            };
+
+            emit('show');
+          });
+        }, 300);
       },
 
       showSubMenu(item: MenuItem) {