diff --git a/src/assets/styles/elementPlus.scss b/src/assets/styles/elementPlus.scss index 7a3f18a3..3a5e6841 100644 --- a/src/assets/styles/elementPlus.scss +++ b/src/assets/styles/elementPlus.scss @@ -3,6 +3,13 @@ &:not(.el-menu--collapse) { width: 254px; } + .el-sub-menu { + &.is-active { + > .el-sub-menu__title { + color: var(--el-color-primary); + } + } + } } .el-date-editor { width: 100% !important; diff --git a/src/components/layout/aside.vue b/src/components/layout/aside.vue index 10af9f78..35241bdf 100644 --- a/src/components/layout/aside.vue +++ b/src/components/layout/aside.vue @@ -29,19 +29,43 @@ import AsideItem from './asideItem.vue'; const store = CommonStore(); -const activePath = ref(store.currentPagePath); +const activePath = ref(''); const isCollapse = ref(false); watch( () => store.currentPagePath, (path) => { - activePath.value = path; + activePath.value = activePathFun(path); } ); const toggleCollapseFun = () => { isCollapse.value = !isCollapse.value; }; + +let currentPath = ''; +const routeDataFun = (data: any, sPath: string, pPath: string) => { + return data.some((item: any) => { + if (item.path === sPath) { + // 不在菜单中显示的,激活父菜单 + if (item.hideInMenu) { + currentPath = pPath; + } else { + currentPath = sPath; + } + return true; + } + if (item.children?.length > 0) { + return routeDataFun(item.children, sPath, item.path); + } + }); +}; + +const activePathFun = (path: any) => { + routeDataFun(menuData, path, '/'); + return currentPath; +}; +activePath.value = activePathFun(store.currentPagePath);