反馈与浮层有已知边界

NnDrawer 抽屉

支持四个方向的浮层面板。

示例

API

Props

名称	类型	默认值	说明
open	boolean	false	受控可见状态；配合 v-model:open。
title	string | number | object | unknown[] | (() => unknown)	''	标题内容，可传 Vue 可渲染对象、数组或无参渲染函数。
width	string | number	378	左右抽屉宽度。数字或纯数字字符串按 px，其他字符串直接作为 CSS 值。
height	string | number	378	上下抽屉高度，换算规则同 width。
placement	string	'right'	left、right、top、bottom；其他值回退 right。
footer	string | number | boolean | object | unknown[] | (() => unknown)	—	自定义页脚。undefined 或 null 且没有 footer 插槽时不创建页脚。
bodyStyle	object | unknown[] | string	{}	正文区域样式。
footerStyle	object | unknown[] | string	{}	页脚区域样式。
zIndex	number | string	1000	浮层层级；不能转为有限数字时回退 1000。
maskClosable	boolean	false	点击遮罩是否请求关闭。
keyboard	boolean	true	是否允许顶部浮层通过 Escape 请求关闭。
closable	boolean	true	是否显示关闭按钮。

Events

事件	参数	说明
update:open	(false)	点击关闭按钮、允许的遮罩或 Escape 时触发。组件本身不直接改变 open。
close	(event: MouseEvent | KeyboardEvent)	与关闭请求同时触发。

Slots

名称	作用域参数	说明
title	—	替换标题。
default	—	抽屉正文。
footer	—	自定义页脚，优先于 footer Prop。

当前限制

• Drawer 没有默认页脚按钮；关闭状态必须由父组件响应 update:open 更新。
• 组件会 Teleport 到 body，锁定页面滚动、限制焦点并在关闭后恢复焦点；与 Modal 共用浮层栈，只有最上层响应 Escape。