呼出一个临时的侧边栏, 可以从多个方向呼出
需要设置 visible
属性,它的类型是 boolean
,当为 true 时显示 Drawer。Drawer 分为两个部分:title
和 body
,title
需要具名为 title 的 slot
, 也可以通过 title
属性来定义,默认值为空。需要注意的是, Drawer 默认是从右往左打开, 当然可以设置对应的 direction
, 详细请参考 用法 最后,本例还展示了 before-close
的用法
不添加 Title
当你不需要标题到时候, 你还可以去掉标题
当遇到不需要 title 的场景时, 可以通过 withHeader
这个属性来关闭掉 title 的显示, 这样可以留出更大的空间给到用户, 为了用户的可访问性, 请务必设定 title
的值
和 Dialog
组件一样, Drawer
同样可以在其内部嵌套各种丰富的操作
多层嵌套
Drawer
组件也拥有多层嵌套的方法
同样, 如果你需要嵌套多层 Drawer
请一定要设置 append-to-body
属性为 true
Drawer 的内容是懒渲染的,即在第一次被打开之前,传入的默认 slot 不会被渲染到 DOM 上。因此,如果需要执行 DOM 操作,或通过 ref
获取相应组件,请在 open
事件回调中进行。
Drawer 提供一个 API, 用来在关闭 Drawer 时销毁子组件内容, 例如清理表单内的状态, 在必要时可以将该属性设置为 true 用来保证初始状态的一致性
如果 visible
属性绑定的变量位于 Vuex 的 store 内,那么 .sync
不会正常工作。此时需要去除 .sync
修饰符,同时监听 Drawer 的 open
和 close
事件,在事件回调中执行 Vuex 中对应的 mutation 更新 visible
属性绑定的变量的值。