Drawer 抽屉
从屏幕边缘滑出的面板,常用于详情展示或表单填写。
右侧抽屉
默认从右侧滑出。
不同方向
通过 placement 设置弹出方向。
圆角抽屉
设置 rounded 开启圆角模式,通过 margin 自定义边距(默认 10px),通过 radius 自定义圆角大小(默认 12px)。
禁止遮罩关闭
设置 mask-closable 为 false 后点击遮罩层不会关闭。
Props
| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
modelValue | boolean | — | 是否显示(必填) |
title | string | — | 标题 |
placement | 'left' | 'right' | 'top' | 'bottom' | 'right' | 弹出方向 |
width | number | string | 360 | 宽度(左右方向生效) |
height | number | string | — | 高度(上下方向生效) |
maskClosable | boolean | true | 点击遮罩层是否关闭 |
rounded | boolean | false | 是否开启圆角模式 |
margin | number | string | 10 | 圆角模式下抽屉距离视口边缘的边距 |
radius | number | string | 12 | 圆角模式下抽屉的圆角大小,默认 12px |
Events
| 事件名 | 类型 | 说明 |
|---|---|---|
update:modelValue | (val: boolean) => void | 显隐状态变化 |
close | () => void | 关闭时触发 |
Slots
| 插槽名 | 说明 |
|---|---|
default | 抽屉主体内容 |
footer | 底部区域 |