Skip to content

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)"
/>

通常不直接使用,而是经 FxTopMenu(水平菜单下拉)驱动。

Attributes

参数说明类型默认值
menus菜单树(按钮型节点自动过滤)LayoutMenuNode[]—(必填)
active-path当前路由 path(子树包含即高亮)string | null—(必填)

Events

事件名说明回调参数
select点击菜单项(叶子或无子级目录)(menu: LayoutMenuNode)

交互

  • 有子级的项 hover 在右侧弹出下一级(200ms 延迟隐藏,可从容在面板间移动)
  • 无子级项 点击 emit select
  • 高亮:activePath 子树包含的各级项标记激活