64 lines
1.7 KiB
Vue
64 lines
1.7 KiB
Vue
<template>
|
|
<el-scrollbar class="avue-menu">
|
|
<div v-if="menu && menu.length == 0 && !isHorizontal" class="avue-sidebar--tip">
|
|
{{ $t('menuTip') }}
|
|
</div>
|
|
<el-menu
|
|
unique-opened
|
|
:default-active="activeMenu"
|
|
:mode="setting.sidebar"
|
|
:collapse="getScreen(isCollapse)"
|
|
>
|
|
<sidebar-item :menu="menu"></sidebar-item>
|
|
</el-menu>
|
|
</el-scrollbar>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapGetters } from 'vuex';
|
|
import website from '@/config/website';
|
|
import sidebarItem from './sidebarItem.vue';
|
|
|
|
export default {
|
|
name: 'sidebar',
|
|
components: { sidebarItem },
|
|
inject: ['index'],
|
|
created() {
|
|
this.index.openMenu();
|
|
},
|
|
computed: {
|
|
...mapGetters(['isHorizontal', 'setting', 'menu', 'tag', 'isCollapse', 'menuId']),
|
|
// 带参菜单的索引集合，用于激活态的精确匹配
|
|
menuIndexes() {
|
|
const props = website.menu;
|
|
const indexes = new Set();
|
|
const collect = list => {
|
|
(list || []).forEach(item => {
|
|
const query = item[props.query];
|
|
if (query && Object.keys(query).length) {
|
|
indexes.add(this.$router.resolve({ path: item[props.path], query }).fullPath);
|
|
}
|
|
collect(item[props.children]);
|
|
});
|
|
};
|
|
collect(this.menu);
|
|
return indexes;
|
|
},
|
|
activeMenu() {
|
|
const route = this.$route;
|
|
const { meta, path } = route;
|
|
if (meta.activeMenu) {
|
|
return meta.activeMenu;
|
|
}
|
|
// 完整地址命中带参菜单索引时精确高亮，其余场景按路径高亮
|
|
const fullPath = route.fullPath;
|
|
if (fullPath !== path && this.menuIndexes.has(fullPath)) {
|
|
return fullPath;
|
|
}
|
|
return path;
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped></style>
|