fix: 修复非一级子菜单显示位置错误；修改滚动条样式和系统滚动条样式一致

kailong321200875 · Jul 2, 2024 · e0596ef · e0596ef
1 parent 0c9f91b
commit e0596ef
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 2 deletions.
diff --git a/src/components/Menu/src/Menu.vue b/src/components/Menu/src/Menu.vue
@@ -257,9 +257,22 @@ export default defineComponent({
     }
   }
 }
+
 @submenu-prefix-cls: ~'@{adminNamespace}-submenu-popper';
+
+// 设置子菜单溢出时滚动样式
 .@{submenu-prefix-cls}--vertical {
-  overflow-y: auto;
   max-height: 100%;
+  overflow-y: auto;
+
+  &::-webkit-scrollbar {
+    width: 6px;
+    background-color: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: rgb(144 147 153 / 30%);
+    border-radius: 4px;
+  }
 }
 </style>
diff --git a/src/components/Menu/src/components/useRenderMenuItem.tsx b/src/components/Menu/src/components/useRenderMenuItem.tsx
@@ -40,7 +40,7 @@ export const useRenderMenuItem = (menuMode) =>
             return (
               <ElSubMenu
                 index={fullPath}
-                popper-append-to-body
+                teleported
                 popperClass={unref(menuMode) === 'vertical' ? `${prefixCls}-popper--vertical` : ''}
               >
                 {{