反馈与浮层

NnNavigationModal 导航对话框

侧栏导航与独立滚动内容。

示例

API

NnNavigationModal 基于 NnModal 提供左侧分类导航、右侧标题与独立滚动内容区，适合设置和管理类对话框。

Props

名称	类型	默认值	说明
open	boolean	false	受控可见状态；配合 v-model:open。
activeKey	string | number	—	受控分类键；配合 v-model:active-key。
items	NavigationModalItem[]	[]	分类数据；结构见下文。
title	string | number | object | unknown[] | (() => unknown)	'设置'	左侧栏标题，同时作为默认对话框无障碍名称。
width	string | number	760	对话框宽度，换算规则同 NnModal.width。
height	string | number	540	对话框高度，换算规则同 NnModal.height。
closable	boolean	true	是否显示右侧标题区关闭按钮。
centered	boolean	true	是否垂直居中。
draggable	boolean	true	是否允许从左侧标题或右侧标题区拖动。
keyboard	boolean	true	是否允许 Escape 请求关闭。
maskClosable	boolean	false	点击遮罩是否请求关闭。
wrapClassName	string | unknown[] | object	''	透传给内部 NnModal的外层 class。
zIndex	number | string	1000	浮层层级。

interface NavigationModalItem {
    key: string | number;
    label: unknown;
    description?: unknown;
    icon?: Component;
    disabled?: boolean;
}

Events

事件	参数	说明
update:open	(false)	关闭按钮、允许的遮罩或 Escape 请求关闭时触发。
update:activeKey	(key: string | number)	用户选择分类，或受控键无效时回退到首个可用项时触发。
change	(key: string | number, item: NavigationModalItem)	用户选择新分类时触发。
cancel	(event: MouseEvent | KeyboardEvent)	关闭按钮、允许的遮罩或 Escape 请求关闭时触发。

Slots

名称	作用域参数	说明
item	{ item, active, index }	替换单个导航项内容；默认显示 icon 和 label。
header	{ item, index }	替换右侧标题与说明；关闭按钮仍由组件管理。
default	{ item, index }	当前分类的可滚动内容。

当 activeKey 未传或无效时，组件选择首个未禁用项。导航项支持方向键、Home 和 End；视口不超过 680px 时，190px 左侧栏改为顶部横向滚动导航。组件继承 NnModal 的遮罩、焦点限制、Escape、滚动锁定和关闭后焦点恢复行为。