fix:折叠
This commit is contained in:
刘玉霞
parent
a9b4c855d9
commit
f1961011bd
@ -1,8 +1,19 @@
|
||||
<template>
|
||||
<el-aside v-if="!navTabs.state.tabFullScreen" :class="'layout-aside-' + config.layout.layoutMode + ' ' + (config.layout.shrink ? 'shrink' : '')">
|
||||
<el-aside
|
||||
v-if="!navTabs.state.tabFullScreen"
|
||||
:class="[
|
||||
config.layout.menuCollapse ? '' : 'layout-aside-collapse',
|
||||
'layout-aside-' + config.layout.layoutMode + ' ' + (config.layout.shrink ? 'shrink' : ''),
|
||||
]"
|
||||
>
|
||||
<Logo v-if="config.layout.menuShowTopBar" />
|
||||
|
||||
<MenuVerticalChildren v-if="config.layout.layoutMode == 'Double'" />
|
||||
<MenuVertical v-else />
|
||||
<div class="layout-toggle-bar" @click="onMenuCollapse">
|
||||
<div class="layout-toggle-bar__top"></div>
|
||||
<div class="layout-toggle-bar__bottom"></div>
|
||||
</div>
|
||||
</el-aside>
|
||||
</template>
|
||||
|
||||
@ -22,6 +33,14 @@ const config = useConfig()
|
||||
const navTabs = useNavTabs()
|
||||
|
||||
const menuWidth = computed(() => config.menuWidth())
|
||||
|
||||
const onMenuCollapse = () => {
|
||||
if (config.layout.menuCollapse) {
|
||||
config.setLayout('menuCollapse', false)
|
||||
} else {
|
||||
config.setLayout('menuCollapse', true)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@ -43,6 +62,7 @@ const menuWidth = computed(() => config.menuWidth())
|
||||
overflow: hidden;
|
||||
transition: width 0.3s ease;
|
||||
width: v-bind(menuWidth);
|
||||
position: relative;
|
||||
}
|
||||
.shrink {
|
||||
position: fixed;
|
||||
@ -50,4 +70,60 @@ const menuWidth = computed(() => config.menuWidth())
|
||||
left: 0;
|
||||
z-index: 9999999;
|
||||
}
|
||||
.layout-toggle-bar {
|
||||
cursor: pointer;
|
||||
height: 72px;
|
||||
width: 32px;
|
||||
position: absolute;
|
||||
top: calc(50% - 36px);
|
||||
|
||||
right: -9px;
|
||||
.layout-toggle-bar__top {
|
||||
background-color: rgba(191, 191, 191, 1);
|
||||
position: absolute;
|
||||
width: 4px;
|
||||
border-radius: 2px;
|
||||
height: 38px;
|
||||
left: 14px;
|
||||
transition:
|
||||
background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
|
||||
transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
.layout-toggle-bar__bottom {
|
||||
background-color: rgba(191, 191, 191, 1);
|
||||
position: absolute;
|
||||
width: 4px;
|
||||
border-radius: 2px;
|
||||
height: 38px;
|
||||
left: 14px;
|
||||
top: 34px;
|
||||
transition:
|
||||
background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
|
||||
transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
&:hover {
|
||||
.layout-toggle-bar__top {
|
||||
background-color: rgba(153, 153, 153, 1);
|
||||
transform: rotate(-12deg) scale(1.15) translateY(-2px);
|
||||
}
|
||||
.layout-toggle-bar__bottom {
|
||||
background-color: rgba(153, 153, 153, 1);
|
||||
transform: rotate(12deg) scale(1.15) translateY(2px);
|
||||
}
|
||||
}
|
||||
}
|
||||
.layout-aside-collapse {
|
||||
.layout-toggle-bar {
|
||||
&:hover {
|
||||
.layout-toggle-bar__top {
|
||||
background-color: rgba(153, 153, 153, 1);
|
||||
transform: rotate(12deg) scale(1.15) translateY(-2px);
|
||||
}
|
||||
.layout-toggle-bar__bottom {
|
||||
background-color: rgba(153, 153, 153, 1);
|
||||
transform: rotate(-12deg) scale(1.15) translateY(2px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -29,6 +29,10 @@ const state = reactive({
|
||||
defaultActive: '',
|
||||
})
|
||||
|
||||
const width = computed(() => {
|
||||
return config.layout.menuCollapse ? '5px' : '20px'
|
||||
})
|
||||
|
||||
const verticalMenusScrollbarHeight = computed(() => {
|
||||
let menuTopBarHeight = 0
|
||||
if (config.layout.menuShowTopBar) {
|
||||
@ -70,7 +74,8 @@ onBeforeRouteUpdate((to) => {
|
||||
}
|
||||
.layouts-menu-vertical {
|
||||
border: 0;
|
||||
padding: 10px 20px 30px 20px;
|
||||
width: 100%;
|
||||
padding: 10px v-bind(width) 30px v-bind(width);
|
||||
--el-menu-bg-color: transparent;
|
||||
--el-menu-active-color: #ffffff;
|
||||
li,
|
||||
|
||||
@ -350,7 +350,7 @@ const menu = [
|
||||
],
|
||||
},
|
||||
]
|
||||
debugger
|
||||
|
||||
function transformNode(menu: any) {
|
||||
menu = menu.map((node: any) => {
|
||||
return {
|
||||
|
||||
@ -10,7 +10,7 @@ export const useConfig = defineStore(
|
||||
/* 全局 */
|
||||
showDrawer: false,
|
||||
// 是否收缩布局(小屏设备)
|
||||
shrink: false,
|
||||
shrink: true,
|
||||
// 后台布局方式，可选值<Default|Classic|Streamline|Double>
|
||||
layoutMode: 'Classic',
|
||||
// 后台主页面切换动画，可选值<slide-right|slide-left|el-fade-in-linear|el-fade-in|el-zoom-in-center|el-zoom-in-top|el-zoom-in-bottom>
|
||||
@ -70,7 +70,7 @@ export const useConfig = defineStore(
|
||||
return layout.menuCollapse ? '0px' : layout.menuWidth + 'px'
|
||||
}
|
||||
// 菜单是否折叠
|
||||
return layout.menuCollapse ? '64px' : layout.menuWidth + 'px'
|
||||
return layout.menuCollapse ? '74px' : layout.menuWidth + 'px'
|
||||
}
|
||||
|
||||
function setLang(val: string) {
|
||||
|
||||
@ -57,23 +57,26 @@ const viteConfig = ({ mode }: ConfigEnv): UserConfig => {
|
||||
...createProxy(VITE_APP_PROXY),
|
||||
},
|
||||
},
|
||||
esbuild: {
|
||||
drop: ['console', 'debugger'],
|
||||
},
|
||||
build: {
|
||||
cssCodeSplit: false,
|
||||
sourcemap: false,
|
||||
outDir: VITE_OUT_DIR,
|
||||
emptyOutDir: true,
|
||||
chunkSizeWarningLimit: 1500,
|
||||
terserOptions: {
|
||||
compress: {
|
||||
keep_infinity: true,
|
||||
// Used to delete console in production environment
|
||||
drop_console: true,
|
||||
drop_debugger: true,
|
||||
},
|
||||
output: {
|
||||
comments: true, // 去掉注释内容
|
||||
},
|
||||
},
|
||||
// terserOptions: {
|
||||
// compress: {
|
||||
// keep_infinity: true,
|
||||
// // Used to delete console in production environment
|
||||
// drop_console: true,
|
||||
// drop_debugger: true,
|
||||
// },
|
||||
// output: {
|
||||
// comments: true, // 去掉注释内容
|
||||
// },
|
||||
// },
|
||||
rollupOptions: {
|
||||
output: {
|
||||
manualChunks: {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user