doc.md 2.8 KB

Drawer 抽屉

从屏幕四边出现的蒙版组件


基本用法

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

不添加 Title

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

自定义内容

像 Dialog 组件一样,Drawer 也可以用来显示多种不同的交互

嵌套抽屉

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

使用具名插槽自定义

使用具名插槽 #header 、#footer 可对抽屉整体根据需要自定义


Attributes

参数 说明 类型 可选值 默认值
v-model 是否显示 Drawer boolean false
title Drawer 的标题,也可通过具名 slot传入 string
direction Drawer 打开的方向 string left / top / right / bottom right
width 抽屉区域宽度,direction 为 left 和 right 时有效 string 30%
height 抽屉区域高度,direction 为 top 和 bottom 时有效 string 40%
show-close 是否显示关闭按钮 boolean true
append-to-body Drawer 自身是否插入至 body 元素上。嵌套的 Drawer 必须指定该属性并赋值为 true boolean false
wrapperClosable 点击遮罩层是否可以关闭 Drawer boolean - true
withHeader 控制是否显示 header 栏, 默认为 true boolean - true
custom-class Drawer 的自定义类名 string


Slot

name 说明
Drawer 的内容
header Drawer 标题区的内容
footer Drawer 按钮操作区的内容


Events

事件名称 说明 回调参数
open Drawer 打开的回调
opened Drawer 打开动画结束时的回调
close Drawer 关闭的回调
closed Drawer 关闭动画结束时的回调