Dropdown Menu 下拉菜单
基于 BrConfigProvider 实现全局主题配置，支持多方向、嵌套子菜单、自定义触发方式的企业级下拉菜单组件。
组件特性
- 🛠️ 多方向弹出：支持向上、下、左、右四个方向弹出，自动调整以适应屏幕边缘。
- 📋 嵌套子菜单：支持无限级嵌套的子菜单，适用于复杂的层级结构。
- ⌨️ 快捷键支持：可为菜单项配置快捷键显示，提升键盘操作体验。
- 🖱️ 多触发方式：支持点击（click）、悬浮（hover）、右键（contextmenu）等多种触发方式。
- 🎨 主题定制：基于
BrConfigProvider支持全局主题定制，同时支持 TailwindCSS 局部样式覆盖。
基础用法
最基础的下拉菜单展示。
Example
位置
支持 align 和 side 属性控制弹出位置，支持 12 个不同的方向。
Example
复杂示例
结合了图标、快捷键、分割线、嵌套子菜单、禁用状态、自定义样式的复杂应用场景。
Example
嵌套子菜单与快捷键
支持多级嵌套子菜单，以及通过 shortcut 属性配置快捷键。
Example
自定义触发方式（悬浮/右键）
支持 click、hover、contextmenu 触发方式，可通过 trigger 属性配置。
Right-click in this area
Example
与表单集成
在表单操作或表格行操作中的典型应用。
Example
主题定制
结合 BrConfigProvider，可以全局覆盖组件默认样式，例如修改圆角、悬浮态颜色、菜单阴影等。同时可以通过 TailwindCSS 局部覆盖样式。
Example
API 说明
BrDropdownMenu
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| open (v-model) | boolean | - | 控制菜单是否展开 |
| defaultOpen | boolean | false | 默认展开状态 |
| dir | 'ltr' | 'rtl' | 'ltr' | 文本阅读方向 |
| trigger | 'click' | 'hover' | 'contextmenu' | Array | 'click' | 触发方式配置 |
| openDelay | number | 200 | 悬浮触发时的展开延迟(ms) |
| closeDelay | number | 300 | 悬浮触发时的收起延迟(ms) |
BrDropdownMenuContent
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| class | any | - | 自定义类名 |
| side | 'top' | 'right' | 'bottom' | 'left' | 'bottom' | 菜单弹出的方向 |
| sideOffset | number | 4 | 菜单距离触发器的偏移量 |
| align | 'start' | 'center' | 'end' | 'center' | 菜单对齐方式 |
| alignOffset | number | 0 | 对齐偏移量 |
BrDropdownMenuItem
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| disabled | boolean | false | 是否禁用 |
| shortcut | string | - | 快捷键文本（如 "⌘K"） |
| inset | boolean | false | 是否包含左侧缩进（用于对齐图标） |
BrDropdownMenuSub
用于嵌套子菜单的根容器，无需额外配置属性。
BrDropdownMenuEmpty / BrDropdownMenuLoading
用于展示空状态或加载中状态。
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| text | string | 'No data' / 'Loading...' | 提示文本 |