Merge pull request #493 from sumile-ting/fix/collapseSubMenuOverflow

fix: 左侧菜单收起后，组件菜单的子菜单显示不全
kailong321200875 · Jun 26, 2024 · ddcf5f4 · ddcf5f4
2 parents b523c28 + 574055c
commit ddcf5f4
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 3 deletions.
diff --git a/src/components/Menu/src/Menu.vue b/src/components/Menu/src/Menu.vue
@@ -98,7 +98,7 @@ export default defineComponent({
         >
           {{
             default: () => {
-              const { renderMenuItem } = useRenderMenuItem()
+              const { renderMenuItem } = useRenderMenuItem(menuMode)
               return renderMenuItem(unref(routers))
             }
           }}
@@ -257,4 +257,9 @@ export default defineComponent({
     }
   }
 }
+@submenu-prefix-cls: ~'@{adminNamespace}-submenu-popper';
+.@{submenu-prefix-cls}--vertical {
+  overflow-y: auto;
+  max-height: 100%;
+}
 </style>
diff --git a/src/components/Menu/src/components/useRenderMenuItem.tsx b/src/components/Menu/src/components/useRenderMenuItem.tsx
@@ -1,12 +1,17 @@
 import { ElSubMenu, ElMenuItem } from 'element-plus'
+import { unref } from 'vue'
 import { hasOneShowingChild } from '../helper'
 import { isUrl } from '@/utils/is'
 import { useRenderMenuTitle } from './useRenderMenuTitle'
 import { pathResolve } from '@/utils/routerHelper'
+import { useDesign } from '@/hooks/web/useDesign'
+
+const { getPrefixCls } = useDesign()
+const prefixCls = getPrefixCls('submenu')
 
 const { renderMenuTitle } = useRenderMenuTitle()
 
-export const useRenderMenuItem = () =>
+export const useRenderMenuItem = (menuMode) =>
   // allRouters: AppRouteRecordRaw[] = [],
   {
     const renderMenuItem = (routers: AppRouteRecordRaw[], parentPath = '/') => {
@@ -33,7 +38,11 @@ export const useRenderMenuItem = () =>
             )
           } else {
             return (
-              <ElSubMenu index={fullPath}>
+              <ElSubMenu
+                index={fullPath}
+                popper-append-to-body
+                popperClass={unref(menuMode) === 'vertical' ? `${prefixCls}-popper--vertical` : ''}
+              >
                 {{
                   title: () => renderMenuTitle(meta),
                   default: () => renderMenuItem(v.children!, fullPath)