说起来，
TinyVue NavMenu 导航菜单组件使用教程
前言
导航菜单是中后台程序的“骨架”。决定了使用者能否快速找到目标功能。TinyVue 的 NavMenu 组件是一个顶部水平导航菜单。支持多级子菜单、根据数据调整、自定义服务加载、溢出处理、跳转前拦截、Logo 和工具栏插槽等能力，适合建立公司级应用的顶部导航栏。
使用者常见痛点 & 对应方法
痛点一：手动拼装多级菜单结构繁琐 ——在大型程序中，层层嵌套的 JSON 难以维护。
方法： 利用 NavMenu 的 data 属性直接驱动渲染，并配合 parent-key 实现扁平数组自动转树。
痛点二：菜单项过多导致横向溢出。页面布局被破坏
方法： 通过 overflow 属性提供四种溢出策略，按业务场景灵活切换。
痛点三：后端返回字段名与组件默认不匹配，需要额外转换代码
方法： fields 映射属性让你在不改动后端结构的情况下直接使用。
痛点四：点击菜单时总是触发浏览器默认跳转，无法统一路由控制或弹窗确认
方法： before-skip 钩子函数让你拦截并自行处理跳转逻辑；结合 :prevent="true" 可阻止默认服务跳转。
痛点五：缺少品牌 Logo 与右侧快捷操作区域，导致 UI 不统一
方法： 利用 #logo/#toolbar 插槽自定义左侧 Logo 与右侧工具栏。
组件介绍
NavMenu 是一个水平导航菜单组件。
通过 data 属性实现根据数据调整渲染，支持无限层级的子菜单。
主要特性
根据数据调整： 通过 :data 配置完整的菜单结构。
自定义服务： :fetch-menu-data 支持异步加载远程菜单。
字段映射： :fields 自定义后端返回字段名。
溢出处理： :overflow="auto|fixed|retract|hidden"
跳转拦截： :before-skip="fn"
从默认选中来看，:default-active="id"
基本用法
最直接的方式是将完整的树形数据通过 :data 传入。每个节点必须包含以下属性：
数据结构说明
interface IDataItem {
至于title，string // 菜单显示文本
从url来看，string // 跳转地址
id的观点是，string // 唯一标识
children?:IDataItem // 子节点
}
溢出处理
If number of top‑level items exceeds container width,control display mode via :overflow prop:
overflow 值 说明
`auto` 默认模式。话说回来，右侧出现 “更多” 菜单，悬浮时展示隐藏项
`fixed` 左侧出现三明治图标，可展开全部项目
`retract` 仅显示三明治图标，悬停展开全部项目
`hidden` 超出的项目直接隐藏，不提供入口
跳转前拦截
The component emits a hook before performing navigation. Return `false` to stop default action.
钩子参数
interface IMenuItem{
id的观点是，string // 菜单唯一标识
说到title，string // 显示文字
说到url，string // 原始链接
说到route，string // 路由方法
从target来看，string // 打开方式 blank/ self 等
说到pid。string // 父节点 ID
isFullUrl:boolean // 是否为完整 URL
}
与默认服务配合使用 prevent 参数
If you rely on built‑in service,you must also set :prevent="true" to fully block its internal navigation.
自定义菜单获取服务& 字段映射
You can replace static data with an async loader. The loader must resolve an array that matches . If your API uses different field names,map m with fields.
import{ TinyNavMenu}from '@opentiny/vue'
// 后端返回字段映射配置
const fields ={
textField:'label',// 将 label 当作标题
urlField :'path',// 将 path 当作链接
key :'menuId' // 唯一标识字段
}
function getMenuData{
const raw =
}
]
return Promise.resolve
}
字段映射详解
interface IFields{
textField:string /* 默认 ’title’ /
urlField :string / 默认 ’url’ /
至于key?string / 默认 ’id’ */
}
*场景*这方面。后端返回 “name / path / menuId” 等非标准键名时只需在页面上声明 fields 即可，无需额外 transform 步骤。
自定义当前激活项
The component does not automatically infer which node should be highlighted – you need to pass corresponding ID.
const defaultActive =ref
const menuData =ref ()
&
lt;/ script &
gt;
扁平数组 → 树结构
If your backend returns a flat list with parent identifiers,just tell NavMenu which field represents parent – it will build hierarchy for you.
