67 lines
2.0 KiB
Markdown
67 lines
2.0 KiB
Markdown
# Menu 组件文档
|
|
|
|
## 1. 组件概述
|
|
|
|
`BimMenu` 是一个通用的菜单列表组件。
|
|
- **位置**: `src/components/menu/index.ts`
|
|
- **功能**: 渲染一组 `BimMenuItem`，支持分组、排序、图标、快捷键提示和多级子菜单。
|
|
- **特点**: 数据驱动（通过 Item 类实例），支持国际化。
|
|
|
|
## 2. 组件类 API
|
|
|
|
### `BimMenu`
|
|
|
|
#### 构造函数
|
|
`new BimMenu(options: MenuOptions)`
|
|
|
|
#### 方法
|
|
|
|
| 方法名 | 参数 | 返回值 | 描述 |
|
|
|:----|:---|:---|:---|
|
|
| `init` | `()` | `void` | 初始化，渲染 DOM |
|
|
| `destroy` | `()` | `void` | 销毁，清理事件和子菜单 |
|
|
| `getElement` | `()` | `HTMLElement` | 获取根 DOM 元素 (实现 IRightKeyContent) |
|
|
|
|
### `BimMenuItem` (基类)
|
|
|
|
所有菜单项必须继承此抽象类。
|
|
|
|
| 方法/属性 | 类型 | 描述 |
|
|
|:----|:---|:---|
|
|
| `id` | `string` | 唯一标识 |
|
|
| `group` | `string` | 分组 ID (默认 'default') |
|
|
| `order` | `number` | 排序权重 |
|
|
| `getLabel()` | `string` | 获取显示文本 |
|
|
| `onClick()` | `void` | 点击回调 |
|
|
| `getIcon()` | `string?` | 获取图标 HTML |
|
|
| `getChildren()` | `BimMenuItem[]?` | 获取子菜单项 |
|
|
|
|
## 3. UI 详细描述
|
|
|
|
- **根元素**: `<ul class="bim-menu">`
|
|
- **分组分割线**: `<li class="bim-menu-divider">`
|
|
- **菜单项**: `<li class="bim-menu-item">`
|
|
- 图标槽: `.bim-menu-item-icon`
|
|
- 文本槽: `.bim-menu-item-label`
|
|
- 箭头槽: `.bim-menu-item-arrow` (仅当有子菜单时)
|
|
|
|
## 4. 逻辑流程
|
|
|
|
1. **分组与排序**:
|
|
- 根据 `item.group` 将项归类。
|
|
- 根据 `options.groupOrder` 对组进行排序。
|
|
- 组内根据 `item.order` 排序。
|
|
2. **多级菜单**:
|
|
- 鼠标进入 (`mouseenter`) 带子菜单的项时，创建新的 `BimMenu` 实例。
|
|
- 将新实例挂载到临时的 fixed 容器中。
|
|
- 自动计算位置（通常在父项右侧，空间不足时翻转）。
|
|
|
|
## 5. 类型定义
|
|
|
|
```typescript
|
|
export interface MenuOptions {
|
|
items: BimMenuItem[];
|
|
groupOrder?: string[];
|
|
}
|
|
```
|