Drawer 抽屉
抽屉组件，用于从屏幕边缘滑出的面板。
基础用法
方向
尺寸
自定义头部/底部
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 | 点击遮罩层是否关闭 |
Slots
| 名称 | 说明 |
|---|---|
header | 自定义头部内容（优先级高于 title） |
default | 抽屉主体内容 |
footer | 底部区域 |
Events
| 事件 | 参数 | 说明 |
|---|---|---|
update:modelValue | (value: boolean) | 显示状态变化时触发 |
open | — | 抽屉打开时触发 |
close | — | 抽屉关闭时触发 |
注意事项
使用
closeOnOverlay && handleClose()时，必须加上括号，否则closeOnOverlay为true时仅返回函数而未执行，导致点击遮罩层无法关闭。当
size="full"且placement="left"/"right"时，抽屉会占满全屏，遮罩层将不可见，建议避免此组合或根据实际需求调整。抽屉打开时会自动锁定 body 滚动，关闭时恢复。