| | |
|---|
| | | <template> |
|---|
| | | <div :class="{ 'has-logo': showLogo }" class="sidebar-container"> |
|---|
| | | <logo v-if="showLogo" :collapse="isCollapse" /> |
|---|
| | | <!-- <logo v-if="showLogo" :collapse="isCollapse" />--> |
|---|
| | | <el-scrollbar wrap-class="scrollbar-wrapper"> |
|---|
| | | <el-menu |
|---|
| | | :default-active="activeMenu" |
|---|
| | | :collapse="isCollapse" |
|---|
| | | :background-color="getMenuBackground" |
|---|
| | | :text-color="getMenuTextColor" |
|---|
| | | :unique-opened="true" |
|---|
| | | :active-text-color="theme" |
|---|
| | | :collapse-transition="false" |
|---|
| | | :collapse="false" |
|---|
| | | mode="vertical" |
|---|
| | | :class="sideTheme" |
|---|
| | | > |
|---|
| | | <sidebar-item |
|---|
| | | v-for="(route, index) in sidebarRouters" |
|---|
| | |
|---|
| | | const showLogo = computed(() => settingsStore.sidebarLogo) |
|---|
| | | const sideTheme = computed(() => settingsStore.sideTheme) |
|---|
| | | const theme = computed(() => settingsStore.theme) |
|---|
| | | const isCollapse = computed(() => !appStore.sidebar.opened) |
|---|
| | | |
|---|
| | | // 获取菜单背景色 |
|---|
| | | const getMenuBackground = computed(() => { |
|---|
| | |
|---|
| | | border: none; |
|---|
| | | height: 100%; |
|---|
| | | width: 100% !important; |
|---|
| | | |
|---|
| | | .el-menu-item, .el-sub-menu__title { |
|---|
| | | &:hover { |
|---|
| | | background-color: var(--menu-hover, rgba(0, 0, 0, 0.06)) !important; |
|---|
