feat(layout): 默认展开所有有子菜单的菜单项
- 修改了 sidebar 的初始折叠状态,设置为关闭 - 在 Sidebar 组件中添加了递归获取所有有 children 的菜单项的逻辑 - 在折叠展开菜单时,自动展开所有有子菜单的菜单项
This commit is contained in:
parent
70a28fb919
commit
4c48b77529
|
@ -5,13 +5,15 @@
|
||||||
<logo v-if="showLogo" :collapse="isCollapse" />
|
<logo v-if="showLogo" :collapse="isCollapse" />
|
||||||
<el-scrollbar wrap-class="scrollbar-wrapper">
|
<el-scrollbar wrap-class="scrollbar-wrapper">
|
||||||
<el-menu
|
<el-menu
|
||||||
|
ref="menuRef"
|
||||||
:collapse="isCollapse"
|
:collapse="isCollapse"
|
||||||
:collapse-transition="false"
|
:collapse-transition="false"
|
||||||
:default-active="activeMenu"
|
:default-active="activeMenu"
|
||||||
:unique-opened="true"
|
|
||||||
mode="vertical"
|
mode="vertical"
|
||||||
|
:default-openeds="allOpenKeys"
|
||||||
>
|
>
|
||||||
<sidebar-item
|
<sidebar-item
|
||||||
|
:index="route.path"
|
||||||
v-for="(route, index) in sidebarRouters"
|
v-for="(route, index) in sidebarRouters"
|
||||||
:key="route.path + index"
|
:key="route.path + index"
|
||||||
:base-path="route.path"
|
:base-path="route.path"
|
||||||
|
@ -46,6 +48,28 @@ export default {
|
||||||
}
|
}
|
||||||
return path;
|
return path;
|
||||||
},
|
},
|
||||||
|
allOpenKeys() {
|
||||||
|
// 递归收集所有有children的完整path
|
||||||
|
const keys = [];
|
||||||
|
function collectKeys(routes, basePath = '') {
|
||||||
|
routes.forEach(route => {
|
||||||
|
if (route.hidden) return;
|
||||||
|
let fullPath = '';
|
||||||
|
if (route.path.startsWith('/')) {
|
||||||
|
fullPath = route.path;
|
||||||
|
} else {
|
||||||
|
fullPath = basePath ? (basePath.endsWith('/') ? basePath + route.path : basePath + '/' + route.path) : route.path;
|
||||||
|
}
|
||||||
|
if (route.children && route.children.length > 0) {
|
||||||
|
if (fullPath) keys.push(fullPath);
|
||||||
|
collectKeys(route.children, fullPath);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
collectKeys(this.sidebarRouters);
|
||||||
|
// 过滤空字符串和重复项
|
||||||
|
return Array.from(new Set(keys.filter(Boolean)));
|
||||||
|
},
|
||||||
showLogo() {
|
showLogo() {
|
||||||
return this.$store.state.settings.sidebarLogo;
|
return this.$store.state.settings.sidebarLogo;
|
||||||
},
|
},
|
||||||
|
@ -59,6 +83,20 @@ export default {
|
||||||
return process.env.VUE_APP_THEME_CLASS !=='theme-blue-white'?'#ffffff':'#000000';
|
return process.env.VUE_APP_THEME_CLASS !=='theme-blue-white'?'#ffffff':'#000000';
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
watch: {
|
||||||
|
isCollapse(val) {
|
||||||
|
if (!val) {
|
||||||
|
// 展开所有有children的菜单
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.allOpenKeys.forEach(key => {
|
||||||
|
if (this.$refs.menuRef && this.$refs.menuRef.submenus && this.$refs.menuRef.submenus[key]) {
|
||||||
|
this.$refs.menuRef.open(key);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
methods: {
|
methods: {
|
||||||
toggleSideBar() {
|
toggleSideBar() {
|
||||||
this.$store.dispatch('app/toggleSideBar')
|
this.$store.dispatch('app/toggleSideBar')
|
||||||
|
|
|
@ -2,7 +2,7 @@ import Cookies from 'js-cookie'
|
||||||
|
|
||||||
const state = {
|
const state = {
|
||||||
sidebar: {
|
sidebar: {
|
||||||
opened: Cookies.get('sidebarStatus') ? !!+Cookies.get('sidebarStatus') : true,
|
opened: Cookies.get('sidebarStatus') ? !!+Cookies.get('sidebarStatus') : false,
|
||||||
withoutAnimation: false
|
withoutAnimation: false
|
||||||
},
|
},
|
||||||
device: 'desktop',
|
device: 'desktop',
|
||||||
|
|
Loading…
Reference in New Issue