59 lines
2.0 KiB
Markdown
59 lines
2.0 KiB
Markdown
# RightKey 组件文档
|
||
|
||
## 1. 组件概述
|
||
|
||
`BimRightKey` 是一个通用的右键浮层容器组件。
|
||
- **位置**: `src/components/right-key/index.ts`
|
||
- **功能**: 负责在指定坐标 (x, y) 显示内容，处理边界检测防止溢出屏幕，以及点击外部自动关闭。
|
||
- **特点**: 它不关心内容是什么，通过 `mount()` 方法挂载任意实现 `IRightKeyContent` 接口的内容组件。
|
||
|
||
## 2. 组件类 API
|
||
|
||
### `BimRightKey`
|
||
|
||
#### 方法
|
||
|
||
| 方法名 | 参数 | 返回值 | 描述 |
|
||
|:----|:---|:---|:---|
|
||
| `init` | `()` | `void` | 初始化，绑定全局点击事件 |
|
||
| `mount` | `(content: IRightKeyContent)` | `void` | 挂载内容组件 |
|
||
| `show` | `(x: number, y: number)` | `void` | <20><><EFBFBD>指定位置显示，会自动调整位置防止溢出 |
|
||
| `hide` | `()` | `void` | 隐藏容器 |
|
||
| `destroy` | `()` | `void` | 销毁容器，解绑事件 |
|
||
| `setOnClose` | `(callback: () => void)` | `void` | 设置关闭时的回调 |
|
||
|
||
## 3. Manager API
|
||
|
||
### `RightKeyManager`
|
||
|
||
- **位置**: `src/managers/right-key-manager.ts`
|
||
- **功能**: 监听容器的 `contextmenu` 事件，决定显示什么内容。
|
||
|
||
#### 方法
|
||
|
||
| 方法名 | 参数 | 返回值 | 描述 |
|
||
|:----|:---|:---|:---|
|
||
| `registerHandler` | `(handler: (e) => BimMenuItem[])` | `void` | 注册上下文处理器 |
|
||
| `showMenu` | `(x, y, items, groupOrder?)` | `void` | 手动显示菜单 |
|
||
| `hide` | `()` | `void` | 隐藏 |
|
||
|
||
## 4. UI 详细描述
|
||
|
||
- **容器**: `<div class="bim-right-key"></div>`
|
||
- **定位**: `position: fixed`
|
||
- **层级**: `z-index: 10000` (默认)
|
||
|
||
## 5. 实现细节
|
||
|
||
- **边界检测**: 在 `show(x, y)` 时，会计算容器宽高和视口宽高。如果 `x + width > viewportWidth`，则 `x = x - width`（向左展开）。同理处理垂直方向。
|
||
- **点击外部关闭**: 监听 `document` 的 `mousedown` 事件，如果点击目标不在容器内，则调用 `hide()`。
|
||
|
||
## 6. 类型定义
|
||
|
||
```typescript
|
||
export interface IRightKeyContent {
|
||
getElement(): HTMLElement;
|
||
destroy(): void;
|
||
}
|
||
```
|