FxCascadeMenu 级联菜单
@fx/layouts 的通用级联菜单组件:垂直面板 + 递归弹出子级(子级在父面板右侧弹出)。定位机制与 FxMenu 折叠弹层同款——手动 getBoundingClientRect + position: fixed(不依赖浮层库,多层嵌套稳定不跳位)。面板规格:38px 项 / 14px 字 / 180px 等宽 / 面板间 8px 间距 + 连接小三角;按钮型节点(menu_type: "button")自动过滤。FxTopMenu 的下拉级联即由此组件驱动。
用法
vue
<FxCascadeMenu
:menus="menus"
:active-path="route.path"
@select="(menu) => menu.path && router.push(menu.path)"
/>1
2
3
4
5
2
3
4
5
通常不直接使用,而是经 FxTopMenu(水平菜单下拉)驱动。
Attributes
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| menus | 菜单树(按钮型节点自动过滤) | LayoutMenuNode[] | —(必填) |
| active-path | 当前路由 path(子树包含即高亮) | string | null | —(必填) |
Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| select | 点击菜单项(叶子或无子级目录) | (menu: LayoutMenuNode) |
交互
- 有子级的项 hover 在右侧弹出下一级(200ms 延迟隐藏,可从容在面板间移动)
- 无子级项 点击 emit select
- 高亮:
activePath子树包含的各级项标记激活
