Drawer 抽屉

从屏幕边缘滑出的面板,常用于详情展示或表单填写。

右侧抽屉
默认从右侧滑出。
不同方向
通过 placement 设置弹出方向。
圆角抽屉
设置 rounded 开启圆角模式,通过 margin 自定义边距(默认 10px),通过 radius 自定义圆角大小(默认 12px)。
禁止遮罩关闭
设置 mask-closable 为 false 后点击遮罩层不会关闭。

Props

参数类型默认值说明
modelValueboolean是否显示(必填)
titlestring标题
placement'left' | 'right' | 'top' | 'bottom''right'弹出方向
widthnumber | string360宽度(左右方向生效)
heightnumber | string高度(上下方向生效)
maskClosablebooleantrue点击遮罩层是否关闭
roundedbooleanfalse是否开启圆角模式
marginnumber | string10圆角模式下抽屉距离视口边缘的边距
radiusnumber | string12圆角模式下抽屉的圆角大小,默认 12px

Events

事件名类型说明
update:modelValue(val: boolean) => void显隐状态变化
close() => void关闭时触发

Slots

插槽名说明
default抽屉主体内容
footer底部区域