Vue3 - Element Plus 菜单侧边栏可拖动调整左右两侧宽度，el-menu菜单组件拖拽中间的分隔栏可调整布局宽度，后台管理系统左侧导航栏可拖曳自由调整大小（Menu菜单拖拽条，详细代码）

### 修改 Vue3 中 Element-Plus 侧边栏收缩时的背景色 在 Vue3 和 Element-Plus 的项目中，可以通过 CSS 深度选择器 `::v-deep` 或者新的语法 `:deep()` 来覆盖组件内部样式。以下是实现修改侧边栏折叠时背景色的具体方法。 #### 使用深度选择器覆盖默认样式 通过添加以下代码到项目的全局样式文件或者特定组件的 `<style>` 块中： ```css /* 覆盖展开状态下菜单的背景色 */ :deep(.el-menu) { background-color: transparent !important; /* 设置透明或其他颜色 */ } /* 自定义折叠状态下的宽度和背景色 */ :deep(.el-menu--collapse) { width: 10px; /* 折叠后的宽度 */ background-color: #your-desired-color !important; /* 替换为你想要的颜色 */ } ``` 上述代码片段分别设置了 `.el-menu` 展开状态下的背景色以及 `.el-menu--collapse` 折叠状态下的宽度与背景色[^1][^3]。 #### 在指定组件中引入变量并应用样式 如果需要更灵活地管理样式，可以将这些样式放入单独的 SCSS 文件中，并在目标组件中导入该文件。例如，在 `Sidebar/index.vue` 组件中引入 `src/styles/variables.scss` 并确保其生效[^2]: ```scss // src/styles/variables.scss $sidebar-bg-color-collapsed: #your-desired-color; .el-menu--collapse { background-color: $sidebar-bg-color-collapsed !important; } ``` 然后在 `Sidebar/index.vue` 中使用 `@import` 导入此文件： ```javascript <style lang="scss"> @import &#39;@/styles/variables.scss&#39;; .sidebar-container { :deep(.el-menu--collapse) { background-color: var(--sidebar-bg-color-collapsed) !important; } } </style> ``` #### 修改图标的颜色 对于侧边栏图标颜色的调整，有多种方式可以选择。一种简单的方法是直接设置父容器的 `color` 属性，因为 SVG 图标通常会继承父级的颜色属性；另一种则是显式更改 `fill` 颜色来控制具体的表现效果[^4]。 ```css /* 方法一：统一设置父级 color */ :deep(.el-submenu__icon-arrow), :deep(.el-menu-item i) { color: #desired-icon-color !important; } /* 方法二：针对 fill 进行独立设定 */ :deep(svg path) { fill: #specific-fill-color !important; } ``` 以上两种方案可以根据实际需求任选其一或组合运用。 --- ### 注意事项 当尝试覆写第三方库（如 Element-Plus）自带样式的某些部分时，请务必确认所使用的类名是否完全匹配官方文档描述的内容结构。此外，由于框架版本迭代可能导致 API 变化，建议始终查阅最新版的相关资料以获取最精确的信息支持。