反馈与浮层有已知边界

NnModal 对话框

模态对话框与默认操作区。

示例

API

Props

名称	类型	默认值	说明
open	boolean	false	受控可见状态；配合 v-model:open。
title	string | number | object | unknown[] | (() => unknown)	''	标题内容，可传 Vue 可渲染对象、数组或无参渲染函数。
footer	string | number | boolean | object | unknown[] | (() => unknown)	—	undefined 显示默认按钮，null 隐藏页脚，其他值作为自定义页脚渲染。
width	string | number	520	对话框宽度。数字或纯数字字符串按 px，其他字符串直接作为 CSS 值。
height	string | number	—	对话框高度，换算规则同 width。
bodyStyle	object | unknown[] | string	{}	正文区域样式。
wrapClassName	string | unknown[] | object	''	对话框外层 wrap 的 class。
zIndex	number | string	1000	浮层层级；不能转为有限数字时回退 1000。
maskClosable	boolean	false	点击遮罩是否请求关闭。
keyboard	boolean	true	是否允许顶部浮层通过 Escape 请求关闭。
closable	boolean	true	是否显示关闭按钮。
centered	boolean	true	是否垂直居中；false 使用顶部布局。
draggable	boolean	true	是否允许从标题栏拖动。
dragHandle	string	''	可选的 CSS 选择器；匹配对话框内元素时，该元素也可作为拖动句柄。
confirmLoading	boolean	false	默认确认按钮显示加载状态，并阻止 ok。
okDisabled	boolean	false	禁用默认确认按钮，并阻止 ok。
okText	string	'确定'	默认确认按钮文字。
cancelText	string	'取消'	默认取消按钮文字。

Events

事件	参数	说明
update:open	(false)	点击关闭/默认取消按钮、允许的遮罩或 Escape 时触发。组件本身不直接改变 open。
ok	(event: MouseEvent)	点击默认确认按钮且未加载、未禁用时触发；不会自动关闭。
cancel	(event: MouseEvent | KeyboardEvent)	关闭按钮、默认取消按钮、允许的遮罩或 Escape 请求关闭时触发。

Slots

名称	作用域参数	说明
title	—	替换标题。
default	—	对话框正文。
footer	—	替换页脚，优先于 footer Prop。

当前限制

• 默认确认操作只发出 ok，父组件需要自行完成异步操作并将 open 更新为 false。
• 自定义 footer 不会自动获得关闭方法，需要通过外部状态控制关闭。
• 标题栏和 dragHandle 匹配的句柄拖动会忽略交互元素和带 data-nn-no-drag 的后代，并把对话框限制在视口内；每次重新打开会重置位置。
• 组件会 Teleport 到 body，锁定页面滚动、限制焦点并在关闭后恢复焦点；多个 Modal/Drawer 共用浮层栈，只有最上层响应 Escape。