diff --git a/src/layouts/components/Menu/BasicMenu.vue b/src/layouts/components/Menu/BasicMenu.vue index c9ddff26..c98458f7 100644 --- a/src/layouts/components/Menu/BasicMenu.vue +++ b/src/layouts/components/Menu/BasicMenu.vue @@ -121,6 +121,7 @@ function resolveFullPath(routePath: string) { */ const onMenuOpen = (index: string) => { expandedMenuIndexes.value.push(index); + updateParentMenuStyles(); }; /** @@ -130,6 +131,7 @@ const onMenuOpen = (index: string) => { */ const onMenuClose = (index: string) => { expandedMenuIndexes.value = expandedMenuIndexes.value.filter((item) => item !== index); + updateParentMenuStyles(); }; /** @@ -164,9 +166,9 @@ watch( watch( () => currentRoute.path, () => { - nextTick(() => { - updateParentMenuStyles(); - }); + // nextTick(() => { + // updateParentMenuStyles(); + // }); } ); @@ -189,12 +191,13 @@ function updateParentMenuStyles() { // 查找当前激活的菜单项 const activeMenuItem = menuEl.querySelector(".el-menu-item.is-active"); - + console.log("activeMenuItem", activeMenuItem); if (activeMenuItem) { // 向上查找父级 el-sub-menu 元素 let parent = activeMenuItem.parentElement; while (parent && parent !== menuEl) { - if (parent.classList.contains("el-sub-menu")) { + if (parent.classList.contains("el-sub-menu") && parent.classList.contains("is-active")) { + console.log("parent", parent); parent.classList.add("has-active-child"); } parent = parent.parentElement; diff --git a/src/layouts/components/Menu/components/MenuItem.vue b/src/layouts/components/Menu/components/MenuItem.vue index fe7d9377..fc2f9d4a 100644 --- a/src/layouts/components/Menu/components/MenuItem.vue +++ b/src/layouts/components/Menu/components/MenuItem.vue @@ -194,7 +194,7 @@ html.sidebar-color-blue { // 父菜单激活状态样式 - 当子菜单激活时,父菜单显示激活状态 .el-sub-menu { // 当父菜单包含激活子菜单时的样式 - &.has-active-child .el-sub-menu__title { + &.has-active-child > .el-sub-menu__title { color: var(--el-color-primary) !important; background-color: var(--el-color-primary-light-9) !important; @@ -205,7 +205,7 @@ html.sidebar-color-blue { // 深色主题下的父菜单激活状态 html.dark & { - &.has-active-child .el-sub-menu__title { + &.has-active-child > .el-sub-menu__title { color: var(--el-color-primary-light-3) !important; background-color: rgba(64, 128, 255, 0.15) !important; @@ -217,7 +217,7 @@ html.sidebar-color-blue { // 深蓝色侧边栏配色下的父菜单激活状态 html.sidebar-color-blue & { - &.has-active-child .el-sub-menu__title { + &.has-active-child > .el-sub-menu__title { color: var(--el-color-primary-light-3) !important; background-color: rgba(64, 128, 255, 0.2) !important;