菜单组件需求分析
Element Plus 官方的 Menu 组件只提供了基础结构，许多功能需要自行丰富。本节分析自研菜单组件的需求。
官方 Menu 组件的不足
- 激活项样式配置受限：原先的
background-color和text-color属性已被弃用，官方推荐使用 CSS 变量--bg-color，但灵活度有限 - 主题配色统一性差：弃用个别属性是为了统一主题配色，但实际定制成本较高
- 缺少业务级封装：官方组件只提供基础交互，缺少数据驱动的完整菜单方案
自研菜单组件的核心需求
| 需求 | 说明 |
|---|---|
| 数据驱动渲染 | 传入菜单数据对象，自动渲染完整菜单 |
| 多级嵌套支持 | 支持二级、三级菜单的递归渲染 |
| 折叠/展开 | 保留官方的 expand / collapse 折叠效果 |
| 激活状态样式 | 自定义激活项的背景色和文字色 |
| 路由联动 | 菜单项与 Vue Router 路由自动关联 |
| 图标支持 | 每个菜单项可配置图标 |
组件拆分方案
将菜单拆分为三个子组件：
Menu（父组件）
├── MenuItem（菜单项组件）-- 叶子节点
└── SubMenu（子菜单组件）-- 可展开的父级节点
└── MenuItem（递归嵌套）
text
Props 类型定义
interface MenuItem {
path: string // 路由路径
title: string // 菜单标题
icon?: string // 图标名称
children?: MenuItem[] // 子菜单
}
interface MenuProps {
data: MenuItem[] // 菜单数据
collapsed?: boolean // 是否折叠
activeColor?: string // 激活项颜色
backgroundColor?: string // 背景色
}
typescript
设计原则
- 只使用官方 Menu 组件的样式和基础交互
- 通过封装层将数据驱动的渲染逻辑与官方组件解耦
- 保持与 Element Plus 主题系统的兼容性
↑