index.vue 2.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758
  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="false"
  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. <script>
  26. import { mapGetters, mapState } from "vuex";
  27. import Logo from "./Logo";
  28. import SidebarItem from "./SidebarItem";
  29. import variables from "@/assets/styles/variables.scss";
  30. export default {
  31. components: { SidebarItem, Logo },
  32. computed: {
  33. ...mapState(["settings"]),
  34. ...mapGetters(["sidebarRouters", "sidebar"]),
  35. activeMenu() {
  36. const route = this.$route;
  37. const { meta, path } = route;
  38. // if set path, the sidebar will highlight the path you set
  39. if (meta.activeMenu) {
  40. return meta.activeMenu;
  41. }
  42. return path;
  43. },
  44. showLogo() {
  45. return this.$store.state.settings.sidebarLogo;
  46. },
  47. variables() {
  48. return variables;
  49. },
  50. isCollapse() {
  51. return !this.sidebar.opened;
  52. }
  53. }
  54. };
  55. </script>