fix: fix the problem of collapsed display when the menu has no child nodes

This commit is contained in:
vben 2020-10-22 22:39:40 +08:00
parent 88de82c493
commit 5cff73bcaf
2 changed files with 33 additions and 35 deletions

View File

@ -248,15 +248,15 @@
} }
&.ant-menu-inline-collapsed { &.ant-menu-inline-collapsed {
.ant-menu-submenu-selected,
.ant-menu-item-selected {
.active-style();
}
.ant-menu-item-selected { .ant-menu-item-selected {
background: unset !important; background: unset !important;
box-shadow: none; box-shadow: none;
} }
.ant-menu-submenu-selected,
.ant-menu-item-selected {
.active-style();
}
} }
} }

View File

@ -46,11 +46,13 @@ export default defineComponent({
if (homeRoute.name === firstItem.name) return false; if (homeRoute.name === firstItem.name) return false;
return homeRoute; return homeRoute;
} }
function pathCompile(path: string) { function pathCompile(path: string) {
const { params } = unref(currentRoute); const { params } = unref(currentRoute);
const toPath = compile(path); const toPath = compile(path);
return toPath(params); return toPath(params);
} }
function handleItemClick(item: AppRouteRecordRaw) { function handleItemClick(item: AppRouteRecordRaw) {
const { redirect, path, meta } = item; const { redirect, path, meta } = item;
if (meta.disabledRedirect) return; if (meta.disabledRedirect) return;
@ -71,37 +73,33 @@ export default defineComponent({
); );
return () => ( return () => (
<> <Breadcrumb class="layout-breadcrumb">
<Breadcrumb class="layout-breadcrumb"> {() => (
{() => ( <TransitionGroup name="breadcrumb">
<> {() => {
<TransitionGroup name="breadcrumb"> return unref(itemList).map((item) => {
{() => { const isLink = !!item.redirect && !item.meta.disabledRedirect;
return unref(itemList).map((item) => { return (
const isLink = !!item.redirect && !item.meta.disabledRedirect; <BreadcrumbItem
return ( key={item.path}
<BreadcrumbItem isLink={isLink}
key={item.path} onClick={handleItemClick.bind(null, item)}
isLink={isLink} >
onClick={handleItemClick.bind(null, item)} {() => (
> <>
{() => ( {props.showIcon && item.meta.icon && item.meta.icon.trim() !== '' && (
<> <Icon icon={item.meta.icon} class="icon mr-1 mb-1" />
{props.showIcon && item.meta.icon && item.meta.icon.trim() !== '' && (
<Icon icon={item.meta.icon} class="icon mr-1 mb-1" />
)}
{item.meta.title}
</>
)} )}
</BreadcrumbItem> {item.meta.title}
); </>
}); )}
}} </BreadcrumbItem>
</TransitionGroup> );
</> });
)} }}
</Breadcrumb> </TransitionGroup>
</> )}
</Breadcrumb>
); );
}, },
}); });