导航有已知边界

NnContextMenu 右键菜单

受控右键菜单与视口定位。

示例

API

Props

名称	类型	默认值	说明
open	boolean	false	受控可见状态，配合 v-model:open；通常通过 openAt 请求打开并设置坐标。
width	number | string	224	菜单宽度；数字或纯数字字符串按 px，其他字符串作为 CSS 值。
maxHeight	number | string	—	最大高度；数字或纯数字字符串按 px，其他值应是可用于 CSS min() 的长度。
zIndex	number | string	1200	浮层层级；不能转为有限数字时回退 1200。
viewportMargin	number | string	8	菜单与视口边缘的最小 px 间距；无效值回退 8，负数按 0。
title	string | number	''	标题；title 插槽优先。
meta	string | number	''	标题区右侧元信息；meta 插槽优先。
description	string | number	''	菜单项之前的说明；同名插槽优先。
hint	string | number	''	菜单项之后的提示；同名插槽优先。
rootClass	string | unknown[] | object	''	菜单浮层根节点附加 class。
titleClass	string | unknown[] | object	''	标题区附加 class。
titleTextClass	string | unknown[] | object	''	标题文字附加 class。
metaClass	string | unknown[] | object	''	元信息附加 class。
descriptionClass	string | unknown[] | object	''	说明区附加 class。
menuClass	string | unknown[] | object	''	默认插槽容器附加 class。
hintClass	string | unknown[] | object	''	提示区附加 class。

未声明属性会转发到 Teleport 后的浮层根节点；class、style 会与组件样式合并。

Events

事件	参数	说明
update:open	(open: boolean)	openAt 请求打开，或组件请求关闭时触发。
openChange	(open: boolean)	与上述组件自身请求同步触发；父组件单独改变 open 不会反向发出该事件。
close	({ reason: string })	关闭请求触发。内建原因包括 outside、escape、resize、scroll 和 api。

Slots

名称	作用域参数	说明
default	—	菜单内容，通常放置 NnMenu 或带菜单项 role 的自定义内容。
title	{ value: string | number }	替换标题。
meta	{ value: string | number }	替换元信息。
description	{ value: string | number }	替换说明。
hint	{ value: string | number }	替换提示。

Expose

interface ContextMenuPoint {
    x: number;
    y: number;
    trigger?: HTMLElement;
    triggerElement?: HTMLElement;
}

interface ContextMenuCloseOptions {
    restoreFocus?: boolean;
    reason?: string;
}

名称	签名	说明
openAt	(source: MouseEvent | ContextMenuPoint) => Promise<boolean>	阻止事件默认行为、请求打开并将菜单限制在视口内；渲染后聚焦首个可用菜单项。请求已被更新、关闭或卸载时返回 false。
close	(options?: boolean | ContextMenuCloseOptions) => void	请求关闭；Boolean 简写表示 restoreFocus。Escape 默认恢复触发元素焦点，其他关闭原因默认不恢复。

打开后，外部 pointerdown、Escape、窗口 resize 或菜单外发生的 scroll 会请求关闭。滚动菜单自身不会关闭。

当前限制

• 直接将 open 改为 true 而不调用 openAt 时，菜单从视口左上边距处打开。
• 组件不会根据默认插槽内的点击自动关闭；选择菜单项后应由调用方更新 open 或调用 close()。