150 lines
4.3 KiB
Vue
150 lines
4.3 KiB
Vue
<!--
|
||
* @Author: Kane
|
||
* @Date: 2023-01-04 11:30:33
|
||
* @LastEditors: Kane
|
||
* @LastEditTime: 2023-01-28 16:01:49
|
||
* @FilePath: \admin_system\src\layout\components\Aside.vue
|
||
* @Description:
|
||
*
|
||
* Copyright (c) ${2022} by Kane, All Rights Reserved. 223142 2f4156
|
||
-->
|
||
<template>
|
||
<el-scrollbar class="wrapper">
|
||
<el-menu id="side-bar" router :default-active="currentPath" background-color="#2f4156" text-color="#fff"
|
||
active-text-color="#ffd04b" :collapse="asideCollapse">
|
||
<template v-for="route in this.routers" :key="route.path">
|
||
<template v-if="!route.hidden">
|
||
<template v-if="hasOnlyChild(route.children)">
|
||
<!-- 当只有一个子路由时，直接渲染子路由 -->
|
||
<el-menu-item :index="route.children[0].path" class="sidebar-submenu">
|
||
<component :is="route.children[0].meta.icon" class="icons">
|
||
</component>
|
||
<!-- <el-icon v-html="route.children[0].meta && route.children[0].meta.icon"></el-icon> -->
|
||
<template #title>{{ route.children[0].meta && route.children[0].meta.title }}</template>
|
||
</el-menu-item>
|
||
</template>
|
||
<template v-else>
|
||
<!-- 不是一个子路由时，有可能没有子路由，或者是多个子路由 -->
|
||
<el-sub-menu v-if="route.children && route.children.length" :index="route.path"
|
||
class="sidebar-submenu">
|
||
<template #title>
|
||
<component :is="route.meta.icon" class="icons"></component>
|
||
<span>{{ route.meta && route.meta.title }}</span>
|
||
</template>
|
||
<template v-for="child in route.children" :key="child.path">
|
||
<el-menu-item v-if="!child.hidden" :index="child.path" class="sidebar-item">
|
||
<component :is="child.meta.icon" class="icons"></component>
|
||
<template #title>{{ child.meta && child.meta.title }}</template>
|
||
</el-menu-item>
|
||
</template>
|
||
</el-sub-menu>
|
||
</template>
|
||
</template>
|
||
</template>
|
||
</el-menu>
|
||
</el-scrollbar>
|
||
</template>
|
||
|
||
<script>
|
||
import { useRouter, useRoute } from "vue-router";
|
||
|
||
export default {
|
||
name: "LayoutAside",
|
||
data()
|
||
{
|
||
return {
|
||
routers: null,
|
||
};
|
||
},
|
||
methods: {
|
||
//用于判断一个路由是否只有一项子路由
|
||
hasOnlyChild: function (children)
|
||
{
|
||
//防御验证
|
||
if (!children)
|
||
{
|
||
return false;
|
||
}
|
||
|
||
//剔除掉hidden的路由
|
||
const routes = children.filter((item) =>
|
||
{
|
||
return item.hidden ? false : true;
|
||
});
|
||
|
||
if (routes.length === 1)
|
||
{
|
||
return true;
|
||
}
|
||
|
||
return false;
|
||
},
|
||
|
||
},
|
||
computed: {
|
||
//获取当前的路由
|
||
currentPath()
|
||
{
|
||
let path = useRoute().path;
|
||
|
||
return path;
|
||
},
|
||
//获取导航栏是否折叠的标志
|
||
asideCollapse()
|
||
{
|
||
return this.$store.state.app.asideBarCollapse;
|
||
}
|
||
},
|
||
created()
|
||
{
|
||
this.routers = useRouter().options.routes;
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
.el-menu {
|
||
border-right: none;
|
||
/* border-left: 5px solid #1d74b2; */
|
||
overflow: auto;
|
||
|
||
-webkit-touch-callout: none;
|
||
-moz-user-select: none;
|
||
/*火狐*/
|
||
-webkit-user-select: none;
|
||
/*webkit浏览器*/
|
||
-ms-user-select: none;
|
||
/*IE10*/
|
||
-khtml-user-select: none;
|
||
/*早期浏览器*/
|
||
user-select: none;
|
||
}
|
||
|
||
.is-active {
|
||
background-color: #ffffff4f !important;
|
||
}
|
||
|
||
|
||
|
||
/* .is-opened {
|
||
border-left: 5px solid #1d74b2;
|
||
} */
|
||
|
||
.icons {
|
||
width: 1em;
|
||
height: 1em;
|
||
margin-right: 8px;
|
||
}
|
||
|
||
.sidebar-submenu {
|
||
background-color: #2f4156 !important;
|
||
}
|
||
|
||
.sidebar-item {
|
||
background-color: #223142 !important;
|
||
}
|
||
|
||
.wrapper {
|
||
height: 100%;
|
||
}
|
||
</style> |