导航有已知边界

NnMenu 菜单

数据或插槽驱动的分层菜单。

示例

API

Props

名称	类型	默认值	说明
items	MenuItem[]	[]	数据驱动菜单；非空时不会渲染默认插槽。结构见下文。
selectedKeys	unknown[]	—	受控选中键；未传时组件维护内部状态。配合 v-model:selected-keys。
openKeys	unknown[]	—	受控展开键；未传时组件维护内部状态。配合 v-model:open-keys。
inlineCollapsed	boolean	false	收窄菜单并隐藏已展开的子菜单列表。
collapsedWidth	number | string	52	折叠宽度；有限 number 限制为非负值并按 px，纯数字字符串按 px，其他非空值字符串化后作为 CSS 值，空值回退 52px。
size	string	'default'	compact 使用更紧凑的内边距、字号和菜单项高度；其他值保持默认密度。
selectable	boolean	true	是否允许菜单项进入选中状态；关闭后仍触发 click。
mode	string	'vertical'	inline、horizontal 或纵向模式；除前两者外都按 vertical 显示。
submenuMode	'inline' | 'popup'	'inline'	子菜单在当前菜单内展开，或以 fixed 浮层显示。

MenuItemData

type MenuItem = MenuItemData | MenuDividerData | string | number | boolean | null | undefined;

interface MenuItemData {
    key?: unknown;
    label?: unknown | (() => unknown);
    icon?: unknown | (() => unknown);
    title?: unknown;
    route?: unknown;
    disabled?: boolean;
    children?: MenuItem[];
}

interface MenuDividerData {
    type: 'divider';
    key?: unknown;
}

• 非对象项会被规范化为 { label: item }。具有非空 children 的对象项会成为子菜单；label、icon 为函数时会以无参数形式调用。
• 普通项缺少 key 时按索引和父级路径生成键，分隔项可写为 { type: 'divider' }。
• 事件中的项信息结构为 { key, keyPath, item, domEvent }；子菜单的内部信息还包含 disabled。

Events

事件	参数	说明
update:selectedKeys	(keys: unknown[])	选择普通项时触发；当前实现始终返回仅含当前键的数组。
update:openKeys	(keys: unknown[])	子菜单展开状态变化时触发。
select	(info)	选中普通项后触发；info 在点击信息上增加 selected: true 和 selectedKeys。
openChange	(keys: unknown[])	与 update:openKeys 同次触发。
click	(info)	点击可用普通项时触发，早于选中事件。

Slots

名称	作用域参数	说明
default	—	声明式菜单内容；仅在 items 为空时渲染。

当前限制

• 选择仅支持单选；再次点击已选项仍会发送同一个单元素数组。
• 受控的 selectedKeys、openKeys 需要父组件响应更新事件，否则界面状态不会变化。
• route 只随 item 进入事件信息，不执行路由跳转或页面导航。
• inlineCollapsed 只负责收窄和隐藏子菜单内容；若需要浮层子菜单，还要设置 submenuMode="popup"。
• popup 模式会在选择普通项后关闭全部子菜单；打开同级分支时只保留新分支的祖先路径。