Drawer 抽屉

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

TIP

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

基础用法

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

不添加 Title

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

自定义内容

就像 Dialog 一样，Drawer 可以做更多丰富的交互操作。

多层嵌套

你可以像 Dialog 一样拥有多层嵌套的 Drawer

TIP

Drawer 内的内容是懒加载的，也就是说在第一次打开 Drawer 之前，你传入的插槽内容是不会被渲染到 DOM 上的，这个功能可以用来优化页面性能。但因此带来的后果是如果你想要对 Drawer 中间的内容进行 DOM API 操纵，例如使用 ref 来控制，你应当在 Drawer 的 open 事件触发之后来做。

TIP

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

Drawer 属性

属性说明类型可选值默认值
model-value / v-model是否显示 Drawerboolean—false
append-to-bodyDrawer 自身是否插入至 body 元素上。嵌套的 Drawer 必须指定该属性并赋值为 trueboolean—false
lock-scroll是否在 Drawer 出现时将 body 滚动锁定boolean—true
before-close关闭前的回调，会暂停 Drawer 的关闭function(done)，done 用于关闭 Drawer——
close-on-click-modal是否可以通过点击 modal 关闭 Drawerboolean—true
close-on-press-escape是否可以通过按下 ESC 关闭 Drawerboolean—true
open-delayDrawer 打开的延时时间，单位毫秒number—0
close-delayDrawer 关闭的延时时间，单位毫秒number—0
custom-classDrawer 的自定义类名string——
destroy-on-close控制是否在关闭 Drawer 之后将子元素全部销毁boolean-false
modal是否需要遮罩层boolean—true
directionDrawer 打开的方向Directionrtl / ltr / ttb / bttrtl
show-close是否显示关闭按钮boolean—true
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--

Drawer 插槽

插槽名说明
—Drawer 的内容
titleDrawer 标题区的内容
footerDrawer 页脚部分

Drawer 方法

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

Drawer 事件

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