admin/jdcProject_front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 左侧导航菜单在高度不足时渲染不全的问题

Browse Source
This commit is contained in:
pany 2024-11-20 19:49:01 +08:00
parent 4f01de4e92
commit c168ef7ab8
2 changed files with 3 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/layouts/LeftTopMode.vue
View File

@ -73,6 +73,7 @@ $transition-time: 0.35s;
} }
.sidebar-container { .sidebar-container {
background-color: var(--el-menu-bg-color);
transition: width $transition-time; transition: width $transition-time;
width: var(--v3-sidebar-width) !important; width: var(--v3-sidebar-width) !important;
height: 100%; height: 100%;

16
src/layouts/components/Sidebar/index.vue
View File

@ -43,8 +43,6 @@ const sidebarMenuHoverBgColor = computed(() => {
const tipLineWidth = computed(() => { const tipLineWidth = computed(() => {
return !isTop.value ? "2px" : "0px" return !isTop.value ? "2px" : "0px"
}) })
/** 当为顶部模式时隐藏垂直滚动条 */
const hiddenScrollbarVerticalBar = computed(() => isTop.value ? "none" : "block")
</script> </script>
<template> <template>
@ -87,20 +85,15 @@ const hiddenScrollbarVerticalBar = computed(() => isTop.value ? "none" : "block"
.has-logo { .has-logo {
.el-scrollbar { .el-scrollbar {
// 多 1% 是为了在左侧模式时侧边栏最底部不显示 1px 左右的白色线条 height: calc(100% - var(--v3-header-height));
height: calc(101% - var(--v3-header-height));
} }
} }
.el-scrollbar { .el-scrollbar {
// 多 1% 是为了在顶部模式时防止垂直滚动 height: 100%;
height: 101%;
:deep(.scrollbar-wrapper) { :deep(.scrollbar-wrapper) {
// 限制水平宽度 // 限制水平宽度
overflow-x: hidden !important; overflow-x: hidden !important;
.el-scrollbar__view {
height: 100%;
}
} }
// 滚动条 // 滚动条
:deep(.el-scrollbar__bar) { :deep(.el-scrollbar__bar) {
@ -108,16 +101,11 @@ const hiddenScrollbarVerticalBar = computed(() => isTop.value ? "none" : "block"
// 隐藏水平滚动条 // 隐藏水平滚动条
display: none; display: none;
} }
&.is-vertical {
// 当为顶部模式时隐藏垂直滚动条
display: v-bind(hiddenScrollbarVerticalBar);
}
} }
} }
.el-menu { .el-menu {
border: none; border: none;
min-height: 100%;
width: 100% !important; width: 100% !important;
} }