diff --git a/components/menu/src/Menu.tsx b/components/menu/src/Menu.tsx index 1ef223f62..58ccd6013 100644 --- a/components/menu/src/Menu.tsx +++ b/components/menu/src/Menu.tsx @@ -373,7 +373,7 @@ export default defineComponent({ registerMenuInfo, unRegisterMenuInfo, selectedSubMenuEventKeys, - isRootMenu: true, + isRootMenu: ref(true), expandIcon: props.expandIcon || slots.expandIcon, }); return () => { diff --git a/components/menu/src/PopupTrigger.tsx b/components/menu/src/PopupTrigger.tsx index 9d2af8cad..86d329b32 100644 --- a/components/menu/src/PopupTrigger.tsx +++ b/components/menu/src/PopupTrigger.tsx @@ -80,7 +80,7 @@ export default defineComponent({ )} stretch={mode === 'horizontal' ? 'minWidth' : null} getPopupContainer={ - isRootMenu ? getPopupContainer.value : triggerNode => triggerNode.parentNode + isRootMenu.value ? getPopupContainer.value : triggerNode => triggerNode.parentNode } builtinPlacements={placement.value} popupPlacement={popupPlacement.value} diff --git a/components/menu/src/hooks/useMenuContext.ts b/components/menu/src/hooks/useMenuContext.ts index 68556c5a1..62d6a5828 100644 --- a/components/menu/src/hooks/useMenuContext.ts +++ b/components/menu/src/hooks/useMenuContext.ts @@ -1,8 +1,6 @@ import type { Key } from '../../../_util/type'; import type { ComputedRef, CSSProperties, InjectionKey, PropType, Ref, UnwrapRef } from 'vue'; -import { toRef } from 'vue'; -import { watchEffect } from 'vue'; -import { defineComponent, inject, provide } from 'vue'; +import { defineComponent, inject, provide, toRef } from 'vue'; import type { BuiltinPlacements, MenuClickEventHandler, @@ -21,7 +19,7 @@ export interface StoreMenuInfo { parentKeys: ComputedRef; } export interface MenuContextProps { - isRootMenu: boolean; + isRootMenu: Ref; store: Ref>>; registerMenuInfo: (key: string, info: StoreMenuInfo) => void; @@ -115,17 +113,17 @@ const MenuContextProvider = defineComponent({ setup(props, { slots }) { const menuContext = useInjectMenu(); const newContext = { ...menuContext }; - watchEffect(() => { - if (props.mode !== undefined) { - newContext.mode = toRef(props, 'mode'); - } - if (props.isRootMenu !== undefined) { - newContext.isRootMenu = props.isRootMenu; - } - if (props.overflowDisabled !== undefined) { - newContext.overflowDisabled = toRef(props, 'overflowDisabled'); - } - }); + // 确保传入的属性不会动态增删 + // 不需要 watch 变化 + if (props.mode !== undefined) { + newContext.mode = toRef(props, 'mode'); + } + if (props.isRootMenu !== undefined) { + newContext.isRootMenu = toRef(props, 'isRootMenu'); + } + if (props.overflowDisabled !== undefined) { + newContext.overflowDisabled = toRef(props, 'overflowDisabled'); + } useProvideMenu(newContext); return () => slots.default?.(); },