From 1f5527270cc780f6efe0be542e4b87e7961680b7 Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Fri, 16 Jun 2023 20:24:51 +0800
Subject: [PATCH] =?UTF-8?q?fix(editor):=20=E6=94=AF=E6=8C=81=E5=A4=9A?=
 =?UTF-8?q?=E5=B1=82=E5=8F=B3=E9=94=AE=E8=8F=9C=E5=8D=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../editor/src/components/ContentMenu.vue     | 23 ++++++++++++-------
 1 file changed, 15 insertions(+), 8 deletions(-)

diff --git a/packages/editor/src/components/ContentMenu.vue b/packages/editor/src/components/ContentMenu.vue
index 016da0bd..7f826306 100644
--- a/packages/editor/src/components/ContentMenu.vue
+++ b/packages/editor/src/components/ContentMenu.vue
@@ -12,6 +12,7 @@
     </div>
     <teleport to="body">
       <content-menu
+        v-if="subMenuData.length"
         class="sub-menu"
         ref="subMenu"
         :menu-data="subMenuData"
@@ -55,6 +56,8 @@ const menuStyle = ref({
   top: '0',
 });
 
+const contains = (el: HTMLElement) => menu.value?.contains(el) || subMenu.value?.contains(el);
+
 const hide = () => {
   if (!visible.value) return;
 
@@ -69,7 +72,7 @@ const hideHandler = (e: MouseEvent) => {
   if (!visible.value || !target) {
     return;
   }
-  if (menu.value?.contains(target) || subMenu.value?.$el?.contains(target)) {
+  if (contains(target)) {
     return;
   }
   hide();
@@ -104,13 +107,15 @@ const showSubMenu = (item: MenuButton | MenuComponent) => {
     return;
   }
 
-  subMenuData.value = menuItem.items;
-  if (menu.value) {
-    subMenu.value.show({
-      clientX: menu.value.offsetLeft + menu.value.clientWidth,
-      clientY: menu.value.offsetTop,
-    });
-  }
+  subMenuData.value = menuItem.items || [];
+  setTimeout(() => {
+    if (menu.value) {
+      subMenu.value?.show({
+        clientX: menu.value.offsetLeft + menu.value.clientWidth,
+        clientY: menu.value.offsetTop,
+      });
+    }
+  }, 0);
 };
 
 onMounted(() => {
@@ -126,7 +131,9 @@ onUnmounted(() => {
 });
 
 defineExpose({
+  menu,
   hide,
   show,
+  contains,
 });
 </script>