mirror of
https://gitee.com/fantastic-admin/basic.git
synced 2024-12-05 05:27:39 +08:00
导航模式为侧边栏模式(不含主导航)时,优化在移动端下展示
This commit is contained in:
parent
b199e8aef4
commit
f9d6f15b5c
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<transition name="main-sidebar">
|
||||
<div v-if="$store.state.settings.menuMode === 'side' || $store.state.settings.mode === 'mobile'" class="main-sidebar-container">
|
||||
<div v-if="$store.state.settings.menuMode === 'side' || ($store.state.settings.mode === 'mobile' && $store.state.settings.menuMode !== 'single')" class="main-sidebar-container">
|
||||
<Logo :show-title="false" class="sidebar-logo" />
|
||||
<!-- 侧边栏模式(含主导航) -->
|
||||
<div class="nav">
|
||||
|
@ -1,14 +1,14 @@
|
||||
<template>
|
||||
<div v-if="['side', 'head', 'single'].includes($store.state.settings.menuMode) || $store.state.settings.mode === 'mobile'" class="sub-sidebar-container" :class="{'is-collapse': $store.state.settings.mode === 'pc' && $store.state.settings.sidebarCollapse}" @scroll="onSidebarScroll">
|
||||
<Logo :show-logo="$store.state.settings.menuMode === 'single' && $store.state.settings.mode === 'pc'" :class="{
|
||||
<Logo :show-logo="$store.state.settings.menuMode === 'single'" :class="{
|
||||
'sidebar-logo': true,
|
||||
'sidebar-logo-bg': $store.state.settings.menuMode === 'single' && $store.state.settings.mode === 'pc',
|
||||
'sidebar-logo-bg': $store.state.settings.menuMode === 'single',
|
||||
'shadow': sidebarScrollTop
|
||||
}"
|
||||
/>
|
||||
<!-- 侧边栏模式(无主导航) -->
|
||||
<el-menu :unique-opened="$store.state.settings.sidebarUniqueOpened" :default-openeds="$store.state.menu.defaultOpenedPaths" :default-active="$route.meta.activeMenu || $route.path" :collapse="$store.state.settings.mode === 'pc' && $store.state.settings.sidebarCollapse" :collapse-transition="false" :class="{
|
||||
'is-collapse-without-logo': $store.state.settings.menuMode !== 'single' && $store.state.settings.mode === 'pc' && $store.state.settings.sidebarCollapse
|
||||
'is-collapse-without-logo': $store.state.settings.menuMode !== 'single' && $store.state.settings.sidebarCollapse
|
||||
}"
|
||||
>
|
||||
<transition-group name="sub-sidebar">
|
||||
|
@ -131,8 +131,7 @@ function switchMenu(index) {
|
||||
.main-container {
|
||||
margin-left: 0;
|
||||
}
|
||||
&[data-menu-mode=head],
|
||||
&[data-menu-mode=single] {
|
||||
&[data-menu-mode=head] {
|
||||
.sidebar-container {
|
||||
width: calc(#{$g-main-sidebar-width} + #{$g-sub-sidebar-width});
|
||||
transform: translateX(-#{$g-main-sidebar-width}) translateX(-#{$g-sub-sidebar-width});
|
||||
@ -144,6 +143,18 @@ function switchMenu(index) {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
&[data-menu-mode=single] {
|
||||
.sidebar-container {
|
||||
width: calc(#{$g-sub-sidebar-width});
|
||||
transform: translateX(-#{$g-sub-sidebar-width});
|
||||
&.show {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
.main-container {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.layout {
|
||||
height: 100%;
|
||||
|
@ -126,7 +126,7 @@ const getters = {
|
||||
// 由于 getter 的结果不会被缓存,导致导航栏切换时有明显的延迟,该问题会在 Vue 3.2 版本中修复,详看 https://github.com/vuejs/vuex/pull/1883
|
||||
routes: (state, getters, rootState) => {
|
||||
let routes
|
||||
if (rootState.settings.menuMode === 'single' && rootState.settings.mode === 'pc') {
|
||||
if (rootState.settings.menuMode === 'single') {
|
||||
routes = [{ children: [] }]
|
||||
state.routes.map(item => {
|
||||
routes[0].children.push(...item.children)
|
||||
|
Loading…
Reference in New Issue
Block a user