kingecg
/
gohttpdUi
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #421 from Cwealth/feat/Cwealth 

fix: 修复Menu组件缩略菜单弹窗内样式不统一问题
This commit is contained in:
Archer 2024-02-06 15:20:21 +08:00 committed by GitHub
parent 544076659f d5dc4e32d5
commit 1123ec9bda
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 44 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/Menu/src/Menu.vue
View File

@ -89,11 +89,16 @@ export default defineComponent({
backgroundColor="var(--left-menu-bg-color)" backgroundColor="var(--left-menu-bg-color)"
textColor="var(--left-menu-text-color)" textColor="var(--left-menu-text-color)"
activeTextColor="var(--left-menu-text-active-color)" activeTextColor="var(--left-menu-text-active-color)"
popperClass={
unref(menuMode) === 'vertical'
? `${prefixCls}-popper--vertical`
: `${prefixCls}-popper--horizontal`
}
onSelect={menuSelect} onSelect={menuSelect}
> >
{{ {{
default: () => { default: () => {
const { renderMenuItem } = useRenderMenuItem(unref(menuMode)) const { renderMenuItem } = useRenderMenuItem()
return renderMenuItem(unref(routers)) return renderMenuItem(unref(routers))
} }
}} }}

84
src/components/Menu/src/components/useRenderMenuItem.tsx
View File

@ -2,57 +2,49 @@ import { ElSubMenu, ElMenuItem } from 'element-plus'
import { hasOneShowingChild } from '../helper' import { hasOneShowingChild } from '../helper'
import { isUrl } from '@/utils/is' import { isUrl } from '@/utils/is'
import { useRenderMenuTitle } from './useRenderMenuTitle' import { useRenderMenuTitle } from './useRenderMenuTitle'
import { useDesign } from '@/hooks/web/useDesign'
import { pathResolve } from '@/utils/routerHelper' import { pathResolve } from '@/utils/routerHelper'
const { renderMenuTitle } = useRenderMenuTitle() const { renderMenuTitle } = useRenderMenuTitle()
export const useRenderMenuItem = ( export const useRenderMenuItem = () =>
// allRouters: AppRouteRecordRaw[] = [], // allRouters: AppRouteRecordRaw[] = [],
menuMode: 'vertical' | 'horizontal' {
) => { const renderMenuItem = (routers: AppRouteRecordRaw[], parentPath = '/') => {
const renderMenuItem = (routers: AppRouteRecordRaw[], parentPath = '/') => { return routers
return routers .filter((v) => !v.meta?.hidden)
.filter((v) => !v.meta?.hidden) .map((v) => {
.map((v) => { const meta = v.meta ?? {}
const meta = v.meta ?? {} const { oneShowingChild, onlyOneChild } = hasOneShowingChild(v.children, v)
const { oneShowingChild, onlyOneChild } = hasOneShowingChild(v.children, v) const fullPath = isUrl(v.path) ? v.path : pathResolve(parentPath, v.path) // getAllParentPath<AppRouteRecordRaw>(allRouters, v.path).join('/')
const fullPath = isUrl(v.path) ? v.path : pathResolve(parentPath, v.path) // getAllParentPath<AppRouteRecordRaw>(allRouters, v.path).join('/')
if ( if (
oneShowingChild && oneShowingChild &&
(!onlyOneChild?.children || onlyOneChild?.noShowingChildren) && (!onlyOneChild?.children || onlyOneChild?.noShowingChildren) &&
!meta?.alwaysShow !meta?.alwaysShow
) { ) {
return ( return (
<ElMenuItem index={onlyOneChild ? pathResolve(fullPath, onlyOneChild.path) : fullPath}> <ElMenuItem
{{ index={onlyOneChild ? pathResolve(fullPath, onlyOneChild.path) : fullPath}
default: () => renderMenuTitle(onlyOneChild ? onlyOneChild?.meta : meta) >
}} {{
</ElMenuItem> default: () => renderMenuTitle(onlyOneChild ? onlyOneChild?.meta : meta)
) }}
} else { </ElMenuItem>
const { getPrefixCls } = useDesign() )
} else {
return (
<ElSubMenu index={fullPath}>
{{
title: () => renderMenuTitle(meta),
default: () => renderMenuItem(v.children!, fullPath)
}}
</ElSubMenu>
)
}
})
}
const preFixCls = getPrefixCls('menu-popper') return {
return ( renderMenuItem
<ElSubMenu }
index={fullPath}
popperClass={
menuMode === 'vertical' ? `${preFixCls}--vertical` : `${preFixCls}--horizontal`
}
>
{{
title: () => renderMenuTitle(meta),
default: () => renderMenuItem(v.children!, fullPath)
}}
</ElSubMenu>
)
}
})
} }
return {
renderMenuItem
}
}