76 lines
1.7 KiB
Vue
76 lines
1.7 KiB
Vue
<template>
|
|
<el-menu
|
|
class="el-menu-vertical-demo"
|
|
:collapse="!$store.getters.sidebarOpened"
|
|
:default-active="activeMenu"
|
|
:unique-opened="true"
|
|
background-color="rgba(0, 0, 0, 0)"
|
|
:text-color="$store.getters.cssVar.menuText"
|
|
:active-text-color="$store.getters.cssVar.menuActiveText"
|
|
router
|
|
>
|
|
<SideBarItem
|
|
v-for="item in routes"
|
|
:key="item.path"
|
|
:route="item"
|
|
></SideBarItem>
|
|
</el-menu>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed } from "vue";
|
|
import { useRouter, useRoute } from "vue-router";
|
|
import { useStore } from "vuex";
|
|
import { filterRoutes, generateMenus } from "@/utils/route";
|
|
import SideBarItem from "./SideBarItem.vue";
|
|
const store = useStore();
|
|
const router = useRouter();
|
|
const routes = computed(() => {
|
|
const fRoutes = filterRoutes(router.getRoutes());
|
|
return generateMenus(fRoutes);
|
|
});
|
|
if (!store.getters.token) {
|
|
router.push("/login");
|
|
}
|
|
if (router.getRoutes().length <= 7 && store.state.permission.routeReady <= 1) {
|
|
store.commit("user/setIsReady", {});
|
|
setTimeout(() => {
|
|
router.go(0);
|
|
}, 200);
|
|
}
|
|
//默认激活项
|
|
const route = useRoute();
|
|
const activeMenu = computed(() => {
|
|
const { path } = route;
|
|
return path;
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
::v-deep .el-menu-item {
|
|
height: 48px;
|
|
}
|
|
::v-deep .el-sub-menu__title {
|
|
height: 48px;
|
|
color: rgb(255, 255, 255);
|
|
background-color: rgb(20, 46, 78);
|
|
}
|
|
::v-deep .el-menu-item.is-active {
|
|
background-image: linear-gradient(to right,#2356d4 0% ,#8efbde 100%);
|
|
margin: 0 14px;
|
|
border-radius: 4px;
|
|
}
|
|
::v-deep .el-sub-menu .el-menu-item {
|
|
height: 48px;
|
|
line-height: 48px;
|
|
}
|
|
|
|
</style>
|
|
<style>
|
|
.el-menu-vertical-demo:not(.el-menu--collapse) {
|
|
width: 281px;
|
|
min-height: 400px;
|
|
}
|
|
|
|
</style>
|