| 提交 | 用户 | 时间 | ||
| fd2207 | 1 | <template> |
| 懒 | 2 | <div :class="{'has-logo':showLogo}" :style="{ backgroundColor: settings.sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }"> |
| 3 | <logo v-if="showLogo" :collapse="isCollapse" /> | |
| 4 | <el-scrollbar :class="settings.sideTheme" wrap-class="scrollbar-wrapper"> | |
| 5 | <el-menu | |
| 6 | :default-active="activeMenu" | |
| 7 | :collapse="isCollapse" | |
| 8 | :background-color="settings.sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground" | |
| 9 | :text-color="settings.sideTheme === 'theme-dark' ? variables.menuColor : variables.menuLightColor" | |
| 10 | :unique-opened="true" | |
| 11 | :active-text-color="settings.theme" | |
| 12 | :collapse-transition="false" | |
| 13 | mode="vertical" | |
| 14 | > | |
| 15 | <sidebar-item | |
| 16 | v-for="(route, index) in sidebarRouters" | |
| 17 | :key="route.path + index" | |
| 18 | :item="route" | |
| 19 | :base-path="route.path" | |
| 20 | /> | |
| 21 | </el-menu> | |
| 22 | </el-scrollbar> | |
| 23 | </div> | |
| 24 | </template> | |
| 25 | ||
| 26 | <script> | |
| 27 | import { mapGetters, mapState } from "vuex"; | |
| 28 | import Logo from "./Logo"; | |
| 29 | import SidebarItem from "./SidebarItem"; | |
| 30 | import variables from "@/assets/styles/variables.scss"; | |
| 31 | ||
| 32 | export default { | |
| 33 | components: { SidebarItem, Logo }, | |
| 34 | computed: { | |
| 35 | ...mapState(["settings"]), | |
| 36 | ...mapGetters(["sidebarRouters", "sidebar"]), | |
| 37 | activeMenu() { | |
| 38 | const route = this.$route; | |
| 39 | const { meta, path } = route; | |
| 40 | // if set path, the sidebar will highlight the path you set | |
| 41 | if (meta.activeMenu) { | |
| 42 | return meta.activeMenu; | |
| 43 | } | |
| 44 | return path; | |
| 45 | }, | |
| 46 | showLogo() { | |
| 47 | return this.$store.state.settings.sidebarLogo; | |
| 48 | }, | |
| 49 | variables() { | |
| 50 | return variables; | |
| 51 | }, | |
| 52 | isCollapse() { | |
| 53 | return !this.sidebar.opened; | |
| 54 | } | |
| 55 | } | |
| 56 | }; | |
| 57 | </script> | |
