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

pany-ang · pany-ang · commit 1f531938a331 · 2024-12-03T13:54:07.000+08:00
diff --git a/src/layouts/LeftTopMode.vue b/src/layouts/LeftTopMode.vue
@@ -73,6 +73,7 @@ $transition-time: 0.35s;
 }
 
 .sidebar-container {
+  background-color: var(--el-menu-bg-color);
   transition: width $transition-time;
   width: var(--v3-sidebar-width) !important;
   height: 100%;
diff --git a/src/layouts/components/Sidebar/index.vue b/src/layouts/components/Sidebar/index.vue
@@ -43,10 +43,6 @@ const sidebarMenuHoverBgColor = computed(() => {
 const tipLineWidth = computed(() => {
   return !isTop.value ? "2px" : "0px"
 })
-// 当为顶部模式时隐藏垂直滚动条
-const hiddenScrollbarVerticalBar = computed(() => {
-  return isTop.value ? "none" : "block"
-})
 </script>
 
 <template>
@@ -84,37 +80,27 @@ const hiddenScrollbarVerticalBar = computed(() => {
 
 .has-logo {
   .el-scrollbar {
-    // 多 1% 是为了在左侧模式时侧边栏最底部不显示 1px 左右的白色线条
-    height: calc(101% - var(--v3-header-height));
+    height: calc(100% - var(--v3-header-height));
   }
 }
 
 .el-scrollbar {
-  // 多 1% 是为了在顶部模式时防止垂直滚动
-  height: 101%;
+  height: 100%;
   :deep(.scrollbar-wrapper) {
     // 限制水平宽度
     overflow-x: hidden !important;
-    .el-scrollbar__view {
-      height: 100%;
-    }
   }
   // 滚动条
   :deep(.el-scrollbar__bar) {
     &.is-horizontal {
       // 隐藏水平滚动条
       display: none;
     }
-    &.is-vertical {
-      // 当为顶部模式时隐藏垂直滚动条
-      display: v-bind(hiddenScrollbarVerticalBar);
-    }
   }
 }
 
 .el-menu {
   border: none;
-  min-height: 100%;
   width: 100% !important;
 }
 

Original file line number	Diff line number	Diff line change
`@@ -73,6 +73,7 @@ $transition-time: 0.35s;`
`73`	`73`	`}`
`74`	`74`
`75`	`75`	`.sidebar-container {`
	`76`	`+ background-color: var(--el-menu-bg-color);`
`76`	`77`	`transition: width $transition-time;`
`77`	`78`	`width: var(--v3-sidebar-width) !important;`
`78`	`79`	`height: 100%;`