Drawer 抽屉

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

基础用法

呼出一个临时的侧边栏, 可以从多个方向呼出

从左往右开 从右往左开 从上往下开 从下往上开

我是标题

显示代码

不添加 Title

当你不需要标题到时候, 你还可以去掉标题

显示代码

自定义内容

和 Dialog 组件一样, Drawer 同样可以在其内部嵌套各种丰富的操作

我嵌套了表格!

我嵌套了 Form !

显示代码

多层嵌套

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

我是外面的 Drawer

显示代码

TIP

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

TIP

Drawer 提供一个 destroyOnClose API, 用来在关闭 Drawer 时销毁子组件内容, 例如清理表单内的状态, 在必要时可以将该属性设置为 true 用来保证初始状态的一致性

TIP

如果 visible 属性绑定的变量位于 Vuex 的 store 内，那么 .sync 不会正常工作。此时需要去除 .sync 修饰符，同时监听 Drawer 的 open 和 close 事件，在事件回调中执行 Vuex 中对应的 mutation 更新 visible 属性绑定的变量的值。

Drawer Attributes

Drawer Slot

Drawer Methods

Drawer Events