Drawer 抽屉

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

提示

由于所有组件原生都支持 v-model，visible.sync 已被弃用，请使用 v-model="visibilityBinding" 来控制当前抽屉的可见性。

基础用法

从不同的方向呼出一个临时的抽屉。

无标题

当你不再需要一个标题时，你可以从抽屉中移除它。

自定义内容

与 Dialog 组件类似，Drawer 组件同样可以在其中加入各种不同的交互。

自定义标题

header 插槽可用于自定义显示标题的区域。为了保持可访问性，除了使用此插槽外，还请使用 title 属性，或使用 titleId 插槽属性指定应作为抽屉标题读出的元素。

可调整大小的抽屉 2.11.0

尝试拖动边缘部分。

多层抽屉

与 Dialog 组件类似，我们也可以拥有多层 Drawer。

设置 modal 为 false 将会隐藏抽屉的模态框（遮罩层）。

从版本 2.11.7 开始，增加了 modal-penetrable 属性，可以穿透。

提示

Drawer 内部的内容应该是懒渲染的，这意味着 Drawer 内部的内容不会影响初始渲染性能，因此任何 DOM 操作都应通过 ref 或在发出 open 事件后执行。

提示

Drawer 提供了一个名为 destroy-on-close 的 API，它是一个标志变量，指示在 Drawer 关闭后是否应销毁 Drawer 内部的子内容。当您需要每次打开 Drawer 时都调用 mounted 生命周期时，可以使用此 API。

API

属性

名称	描述	类型	默认值
model-value / v-model	是否显示 Drawer	`boolean`	false
append-to-body	控制 Drawer 是否插入到 DocumentBody 元素中，嵌套的 Drawer 必须将此参数赋值为 true	`boolean`	false
append-to 2.8.0	Drawer 附加到的元素。将覆盖 `append-to-body`	`CSSSelector` / `HTMLElement`	body
lock-scroll	当 Drawer 显示时，是否禁用 body 的滚动	`boolean`	true
before-close	如果设置，关闭过程将被中止	`Function`	—
close-on-click-modal	是否可以通过点击遮罩层关闭 Drawer	`boolean`	true
close-on-press-escape	指示是否可以通过按 ESC 关闭 Drawer	`boolean`	true
open-delay	打开前的延迟时间（毫秒）	`number`	0
close-delay	关闭前的延迟时间（毫秒）	`number`	0
destroy-on-close	指示 Drawer 关闭后是否销毁子元素	`boolean`	false
modal	是否显示遮罩层	`boolean`	true
modal-penetrable 2.11.7	遮罩层是否可穿透。modal 属性必须为 `false`。	`boolean`	false
direction	Drawer 的打开方向	`枚举`	rtl
resizable 2.11.0	为 Drawer 启用可调整大小的功能	`boolean`	false
show-close	是否在 Drawer 的右上角显示关闭按钮	`boolean`	true
size	Drawer 的大小，如果 Drawer 是水平模式，它影响宽度属性，否则影响高度属性，当 size 是 `number` 类型时，它以像素为单位描述大小；当 size 是 `string` 类型时，应使用 `x%` 表示法，否则将被解释为像素单位	`number` / `string`	30%
title	Drawer 的标题，也可以通过命名插槽设置，详细描述可以在插槽表单中找到	`string`	—
with-header	控制头部区域是否存在的标志，默认为 true，当 withHeader 设置为 false 时，`title 属性`和`title 插槽`都将不起作用	`boolean`	true
modal-class	遮罩层的额外类名	`string`	—
header-class 2.9.3	头部包装器的自定义类名	`string`	—
body-class 2.9.3	主体包装器的自定义类名	`string`	—
footer-class 2.9.3	底部包装器的自定义类名	`string`	—
z-index	设置 z-index	`number`	—
header-aria-level a11y	头部的 `aria-level` 属性	`string`	2
custom-class 已弃用	Drawer 的额外类名	`string`	—

警告

custom-class 已被弃用，并将在 2.3.0 中移除，请使用 class。

事件

名称	描述	类型
open	在 Drawer 打开动画开始前触发	`Function`
opened	在 Drawer 打开动画结束后触发	`Function`
关闭	在 Drawer 关闭动画开始前触发	`Function`
closed	在 Drawer 关闭动画结束后触发	`Function`
open-auto-focus	在 Drawer 打开且内容获得焦点后触发	`Function`
close-auto-focus	在 Drawer 关闭且内容获得焦点后触发	`Function`
resize-start 2.11.8	在调整大小开始时触发（当 `resizable` 启用时）	`Function`
resize 2.11.8	在调整大小期间触发（当 `resizable` 启用时）	`Function`
resize-end 2.11.8	在调整大小结束时触发（当 `resizable` 启用时）	`Function`

插槽

名称	描述
default	Drawer 的内容
header	Drawer 头部区域；替换此区域会移除标题，但不会移除关闭按钮。
footer	Drawer 底部区域
title 已弃用	与 header 插槽作用相同。请改用那个。

警告

title 已被弃用，并将在 3.0.0 中移除，请使用 header。