Drawer 抽屉
抽屉组件，用于从屏幕边缘滑出的面板。
何时使用：需要从屏幕边缘滑出一个面板展示详情或表单，且不遮挡全部内容时使用。全屏弹窗请使用 Modal。
基础用法
方向
尺寸
自定义头部/底部
API
Props
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
modelValue | boolean | false | 是否显示（v-model） |
placement | 'left' | 'right' | 'top' | 'bottom' | 'right' | 抽屉方向 |
size | 'sm' | 'md' | 'lg' | 'xl' | 'full' | 'md' | 尺寸 |
title | string | '' | 标题文本 |
closable | boolean | true | 是否显示关闭按钮 |
closeOnOverlay | boolean | true | 点击遮罩层是否关闭 |
closeAriaLabel | string | '关闭抽屉' | 关闭按钮的无障碍标签 |
enableEsc | boolean | true | 是否启用 ESC 键关闭 |
enableFocusTrap | boolean | true | 是否启用焦点陷阱（键盘 Tab 循环） |
Slots
| 名称 | 说明 |
|---|---|
header | 自定义头部内容（优先级高于 title） |
default | 抽屉主体内容 |
footer | 底部区域 |
Events
| 事件 | 参数 | 说明 |
|---|---|---|
update:modelValue | (value: boolean) | 显示状态变化时触发 |
open | — | 抽屉打开时触发 |
close | — | 抽屉关闭时触发 |
注意事项
使用
closeOnOverlay && handleClose()时，必须加上括号，否则closeOnOverlay为true时仅返回函数而未执行，导致点击遮罩层无法关闭。当
size="full"且placement="left"/"right"时，抽屉会占满全屏，遮罩层将不可见，建议避免此组合或根据实际需求调整。抽屉打开时会自动锁定 body 滚动，关闭时恢复。
支持按 ESC 键关闭（可通过
enableEsc禁用）。打开时自动启用焦点陷阱（可通过
enableFocusTrap禁用）。关闭后焦点自动返回打开前的触发元素（WCAG 2.4.3）。
包含完整的 ARIA 无障碍属性。