FxLayoutMenuSearch 菜单搜索
搜索按钮 + 全屏搜索弹窗。自带业务逻辑:从 useLayoutBusiness 收集动态菜单 + 静态路由作为可搜索项,选中后 router.push 跳转。内部完成模糊匹配、关键词高亮、面包屑渲染、键盘导航(↑↓ 切换 / Enter 选择 / Esc 关闭),支持 Ctrl+K / Cmd+K 全局快捷键唤出。
基础用法
vue
<template>
<FxLayoutMenuSearch />
</template>1
2
3
2
3
无需传 props——组件内部从 useLayoutBusiness 收集菜单,选中自动 router.push。
FxSearchItem
| 字段 | 说明 | 类型 |
|---|---|---|
| title | 主标题(参与模糊匹配) | string |
| path | 路由路径(选中后 router.push) | string |
| icon | 主标题图标(IconString) | string | null |
| breadcrumbParts | 面包屑(最后一段为 title 本身) | FxSearchBreadcrumbPart[] |
注意事项
- 必须在
provideLayoutBusiness提供的上下文内使用(BasicLayout已封装),否则抛错 - 菜单数据来自
useLayoutBusiness().menus(动态菜单,后端权限菜单)+.staticRoutes(前端静态路由) - 已被
FxHeaderAction内嵌使用,通常无需单独调用
