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

    需要设置 visible 属性,它的类型boolean,当为 true 时显示 Drawer。Drawer 分为两个部分:titlebodytitle 需要具名为 titleslot, 也可以通过 title 属性来定义,默认值为空。需要注意的是, Drawer 默认是从右往左打开, 当然可以设置对应的 direction, 详细请参考 用法 最后,本例还展示了 before-close 的用法

    不添加 Title

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

    当遇到不需要 title 的场景时, 可以通过 withHeader 这个属性来关闭掉 title 的显示, 这样可以留出更大的空间给到用户, 为了用户的可访问性, 请务必设定 title 的值

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

    Drawer 抽屉 - 图3

    多层嵌套

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

    同样, 如果你需要嵌套多层 Drawer 请一定要设置 append-to-body 属性为 true

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

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

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

    Drawer Slot

    Drawer Events