Drawer 抽屉

有些时候, Dialog 组件并不满足我们的需求, 比如你的表单很长, 亦或是你需要临时展示一些文档, Drawer 拥有和 Dialog 几乎相同的 API, 在 UI 上带来不一样的体验.

TIP

在 Vue 3 之后的版本 v-model 可以用于任何一个组件,visible.sync 已被移除,请使用 v-model="visibilityBinding" 来控制抽屉组件的显示和隐藏状态。

基础用法

呼出一个临时的侧边栏,支持上下左右四个方向。

不添加 Title

当你不需要标题的时候,你可以将它移除。

自定义内容

Dialog 组件一样,Drawer 也可以用来显示多种不同的交互。

自定义头部

header 可用于自定义显示标题的区域。 为了保持可用性,除了使用此插槽外,使用 title 属性,或使用 titleId 插槽属性来指定哪些元素应该读取为抽屉标题。

嵌套抽屉

Drawer 组件也拥有多层嵌套的方法

TIP

Drawer 的内容是懒渲染的,即在第一次被打开之前,传入的默认 slot 不会被渲染到 DOM 上。 因此,如果需要执行 DOM 操作,或通过 ref 获取相应组件,请在 open 事件回调中进行。

TIP

Drawer 还提供一个 destroy-on-close 的 API,用来控制是否在 Drawer 隐藏之后把 Drawer 的默认插槽内的内容销毁。 当你需要你的 挂载的 生命周期每次打开时你可以使用此 API。

Drawer 属性

属性名说明类型可选值默认值
model-value / v-model是否显示 Drawerbooleanfalse
append-to-bodyDrawer 自身是否插入至 body 元素上。嵌套的 Drawer 必须指定该属性并赋值为 truebooleanfalse
lock-scroll是否在 Drawer 出现时将 body 滚动锁定booleantrue
before-close关闭前的回调,会暂停 Drawer 的关闭function(done),done 用于关闭 Drawer
close-on-click-modal是否可以通过点击 modal 关闭 Drawerbooleantrue
close-on-press-escape是否可以通过按下 ESC 关闭 Drawerbooleantrue
open-delayDrawer 打开的延时时间,单位毫秒number0
close-delayDrawer 关闭的延时时间,单位毫秒number0
custom-class deprecatedDrawer 的自定义类名string
destroy-on-close控制是否在关闭 Drawer 之后将子元素全部销毁boolean-false
modal是否需要遮罩层booleantrue
directionDrawer 打开的方向Directionrtl / ltr / ttb / bttrtl
show-close是否显示关闭按钮booleantrue
sizeDrawer 窗体的大小, 当使用 number 类型时, 以像素为单位, 当使用 string 类型时, 请传入 'x%', 否则便会以 number 类型解释number / string-'30%'
titleDrawer 的标题,也可通过具名 slot (见下表)传入string
with-header控制是否显示 header 栏, 默认为 true, 当此项为 false 时, title attribute 和 title slot 均不生效boolean-true
modal-class遮罩层的自定义类名string--
z-index设置 z-indexnumber--

WARNING

custom-class 已被 弃用, 之后 将会被 移除到 2.3.0, 请使用 class.

Drawer 插槽

插槽名说明
Drawer 的内容
headerDrawer 标题的内容;会替换标题部分,但不会移除关闭按钮。
title(已废弃)与 header 作用相同 请使用 header
footerDrawer 页脚部分

Drawer 方法

名称说明
handleClose用于关闭 Drawer, 该方法会调用传入的 before-close 方法

Drawer 事件

事件名说明参数
openDrawer 打开的回调
openedDrawer 打开动画结束时的回调
closeDrawer 关闭的回调
closedDrawer 关闭动画结束时的回调

源代码

组件文档

贡献者