diff --git a/packages/components/menu/submenu.tsx b/packages/components/menu/submenu.tsx index c9e13a9549..012769c21e 100644 --- a/packages/components/menu/submenu.tsx +++ b/packages/components/menu/submenu.tsx @@ -9,9 +9,9 @@ import { watch, Slots, toRefs, - reactive, nextTick, Transition, + toRef, } from 'vue'; import props from './submenu-props'; import { TdMenuInterface, TdSubMenuInterface, TdMenuItem } from './types'; @@ -36,7 +36,7 @@ export default defineComponent({ const { theme, activeValues, expandValues, isHead, open } = menu; const submenu = inject('TdSubmenu', {}); - const { setSubPopup, closeParentPopup } = submenu; + const { setSubPopup, closeParentPopup, popupVisible: parentPopupVisible } = submenu; const mode = computed(() => attrs.expandType || menu.mode.value); @@ -100,26 +100,26 @@ export default defineComponent({ }, ]); - provide( - 'TdSubmenu', - reactive({ - value, - addMenuItem: (item: TdMenuItem) => { - menuItems.value.push(item); - if (submenu) { - submenu.addMenuItem(item); - } - }, - setSubPopup: (ref: HTMLElement) => { - subPopupRef.value = ref; - }, - closeParentPopup: (e: MouseEvent) => { - const related = e.relatedTarget as HTMLElement; - if (loopInPopup(related)) return; - handleMouseLeavePopup(e); - }, - }), - ); + const submenuInterface = { + value: value.value, + addMenuItem: (item: TdMenuItem) => { + menuItems.value.push(item); + if (submenu) { + submenu.addMenuItem(item); + } + }, + setSubPopup: (ref: HTMLElement) => { + subPopupRef.value = ref; + }, + closeParentPopup: (e: MouseEvent) => { + const related = e.relatedTarget as HTMLElement; + if (loopInPopup(related)) return; + handleMouseLeavePopup(e); + }, + popupVisible: toRef(popupVisible), + }; + + provide('TdSubmenu', submenuInterface); const passSubPopupRefToParent = (val: HTMLElement) => { if (isFunction(setSubPopup)) { @@ -131,6 +131,7 @@ export default defineComponent({ const handleMouseEnter = () => { if (props.disabled) return; setTimeout(() => { + if (parentPopupVisible?.value === false) return; if (!popupVisible.value) { open(props.value); @@ -178,6 +179,9 @@ export default defineComponent({ closeParentPopup?.(e); }; const handleEnterPopup = () => { + // 如果父 popup 存在且不可见,不触发保持可见功能 + if (parentPopupVisible?.value === false) return; + isCursorInPopup.value = true; }; diff --git a/packages/components/menu/types.ts b/packages/components/menu/types.ts index 49e2da5aa9..8eb486e4c0 100644 --- a/packages/components/menu/types.ts +++ b/packages/components/menu/types.ts @@ -28,4 +28,5 @@ export interface TdSubMenuInterface { addMenuItem?: (item: TdMenuItem) => void; setSubPopup?: (popupRef: HTMLElement) => void; closeParentPopup?: (e: MouseEvent) => void; + popupVisible?: Ref; }