refactor: menu

components/menu/src/Menu.tsx

@@ -320,6 +320,7 @@ export default defineComponent({
       registerMenuInfo,
       unRegisterMenuInfo,
       selectedSubMenuEventKeys,
+      isRootMenu: true,
     });
     return () => {
       return <ul class={className.value}>{slots.default?.()}</ul>;

components/menu/src/PopupTrigger.tsx

@@ -36,6 +36,7 @@ export default defineComponent({
       subMenuCloseDelay,
       builtinPlacements,
       triggerSubMenuAction,
+      isRootMenu,
     } = useInjectMenu();
 
     const placement = computed(() =>
@@ -77,7 +78,9 @@ export default defineComponent({
             popupClassName,
           )}
           stretch={mode === 'horizontal' ? 'minWidth' : null}
-          getPopupContainer={getPopupContainer.value}
+          getPopupContainer={
+            isRootMenu ? getPopupContainer.value : triggerNode => triggerNode.parentNode
+          }
           builtinPlacements={placement.value}
           popupPlacement={popupPlacement.value}
           popupVisible={innerVisible.value}

components/menu/src/SubMenu.tsx

@@ -31,7 +31,7 @@ export default defineComponent({
     internalPopupClose: Boolean,
   },
   slots: ['icon', 'title'],
-  emits: ['titleClick', 'titleMouseenter', 'titleMouseleave'],
+  emits: ['titleClick', 'mouseenter', 'mouseleave'],
   inheritAttrs: false,
   setup(props, { slots, attrs, emit }) {
     useProvideFirstLevel(false);
@@ -130,13 +130,13 @@ export default defineComponent({
     const onMouseEnter = (event: MouseEvent) => {
       if (!mergedDisabled.value) {
         changeActiveKeys(keysPath.value);
-        emit('titleMouseenter', event);
+        emit('mouseenter', event);
       }
     };
     const onMouseLeave = (event: MouseEvent) => {
       if (!mergedDisabled.value) {
         changeActiveKeys([]);
-        emit('titleMouseleave', event);
+        emit('mouseleave', event);
       }
     };
 
@@ -245,7 +245,7 @@ export default defineComponent({
             onVisibleChange={onPopupVisibleChange}
             v-slots={{
               popup: ({ visible }) => (
-                <MenuContextProvider props={{ mode: triggerModeRef }}>
+                <MenuContextProvider props={{ mode: triggerModeRef, isRootMenu: false }}>
                   <Transition {...mergedMotion.value}>
                     <SubMenuList v-show={visible} id={popupId} ref={popupRef}>
                       {slots.default?.()}

components/menu/src/hooks/useMenuContext.ts

@@ -26,6 +26,8 @@ export interface StoreMenuInfo {
   isLeaf?: boolean;
 }
 export interface MenuContextProps {
+  isRootMenu: boolean;
+
   store: UnwrapRef<Record<string, StoreMenuInfo>>;
   registerMenuInfo: (key: string, info: StoreMenuInfo) => void;
   unRegisterMenuInfo: (key: string) => void;
@@ -116,7 +118,7 @@ const MenuContextProvider = defineComponent({
     props: Object,
   },
   setup(props, { slots }) {
-    useProvideMenu({ ...useInjectMenu(), ...props });
+    useProvideMenu({ ...useInjectMenu(), ...props.props });
     return () => slots.default?.();
   },
 });

v2-doc

@@ -1 +1 @@
-Subproject commit d197053285b81e77718621c0b5b94cb3b21831a2
+Subproject commit a7013ae87f69dcbcf547f4b023255b8a7a775557