diff --git a/src/components/Menu/src/Menu.vue b/src/components/Menu/src/Menu.vue index efd0dd9..1950824 100644 --- a/src/components/Menu/src/Menu.vue +++ b/src/components/Menu/src/Menu.vue @@ -89,11 +89,16 @@ export default defineComponent({ backgroundColor="var(--left-menu-bg-color)" textColor="var(--left-menu-text-color)" activeTextColor="var(--left-menu-text-active-color)" + popperClass={ + unref(menuMode) === 'vertical' + ? `${prefixCls}-popper--vertical` + : `${prefixCls}-popper--horizontal` + } onSelect={menuSelect} > {{ default: () => { - const { renderMenuItem } = useRenderMenuItem(unref(menuMode)) + const { renderMenuItem } = useRenderMenuItem() return renderMenuItem(unref(routers)) } }} diff --git a/src/components/Menu/src/components/useRenderMenuItem.tsx b/src/components/Menu/src/components/useRenderMenuItem.tsx index 3a33922..301313f 100644 --- a/src/components/Menu/src/components/useRenderMenuItem.tsx +++ b/src/components/Menu/src/components/useRenderMenuItem.tsx @@ -2,57 +2,49 @@ import { ElSubMenu, ElMenuItem } from 'element-plus' import { hasOneShowingChild } from '../helper' import { isUrl } from '@/utils/is' import { useRenderMenuTitle } from './useRenderMenuTitle' -import { useDesign } from '@/hooks/web/useDesign' import { pathResolve } from '@/utils/routerHelper' const { renderMenuTitle } = useRenderMenuTitle() -export const useRenderMenuItem = ( +export const useRenderMenuItem = () => // allRouters: AppRouteRecordRaw[] = [], - menuMode: 'vertical' | 'horizontal' -) => { - const renderMenuItem = (routers: AppRouteRecordRaw[], parentPath = '/') => { - return routers - .filter((v) => !v.meta?.hidden) - .map((v) => { - const meta = v.meta ?? {} - const { oneShowingChild, onlyOneChild } = hasOneShowingChild(v.children, v) - const fullPath = isUrl(v.path) ? v.path : pathResolve(parentPath, v.path) // getAllParentPath(allRouters, v.path).join('/') + { + const renderMenuItem = (routers: AppRouteRecordRaw[], parentPath = '/') => { + return routers + .filter((v) => !v.meta?.hidden) + .map((v) => { + const meta = v.meta ?? {} + const { oneShowingChild, onlyOneChild } = hasOneShowingChild(v.children, v) + const fullPath = isUrl(v.path) ? v.path : pathResolve(parentPath, v.path) // getAllParentPath(allRouters, v.path).join('/') - if ( - oneShowingChild && - (!onlyOneChild?.children || onlyOneChild?.noShowingChildren) && - !meta?.alwaysShow - ) { - return ( - - {{ - default: () => renderMenuTitle(onlyOneChild ? onlyOneChild?.meta : meta) - }} - - ) - } else { - const { getPrefixCls } = useDesign() + if ( + oneShowingChild && + (!onlyOneChild?.children || onlyOneChild?.noShowingChildren) && + !meta?.alwaysShow + ) { + return ( + + {{ + default: () => renderMenuTitle(onlyOneChild ? onlyOneChild?.meta : meta) + }} + + ) + } else { + return ( + + {{ + title: () => renderMenuTitle(meta), + default: () => renderMenuItem(v.children!, fullPath) + }} + + ) + } + }) + } - const preFixCls = getPrefixCls('menu-popper') - return ( - - {{ - title: () => renderMenuTitle(meta), - default: () => renderMenuItem(v.children!, fullPath) - }} - - ) - } - }) + return { + renderMenuItem + } } - - return { - renderMenuItem - } -}