# 4、drawer 抽屉

# template 使用方式

<vk-data-drawer
  v-model="drawerShow"
  title="标题"
  width="800px"
>
  
</vk-data-drawer>
1
2
3
4
5
6
7

# API

# 属性

参数 说明 类型 默认值 可选值
v-model 双向绑定一个变量,当变量为true: 弹窗显示 false: 弹窗关闭 Boolean - -
title 弹窗标题 String - -
width 弹窗宽度 Number rtl rtl / ltr / ttb / btt
direction Drawer 打开的方向 String - -
close-on-click-modal 是否可以通过点击 modal 关闭 Drawer Boolean false true
close-on-press-escape 是否可以通过按下 ESC 关闭 Drawer Boolean true false
show-close 是否显示关闭按钮 Boolean true false
modal 是否需要遮罩层 Boolean true false
append-to-body Drawer 自身是否插入至 body 元素上。嵌套的 Drawer 必须指定该属性并赋值为 true Boolean false true
modal-append-to-body 遮罩层是否插入至 body 元素上,若为 false,则遮罩层会插入至 Drawer 的父元素上 Boolean false true
custom-class Drawer 的自定义类名 String - -
show-header 是否显示头部 Boolean true false
before-close 关闭前的回调,会暂停 Drawer 的关闭 Function - -
destroy-on-close 控制是否在关闭弹窗之后将子元素全部销毁 Boolean false true

# 事件

事件名 说明 回调参数
open 监听 - 弹窗打开 - 动画开始 -
opened 监听 - 弹窗打开 - 动画结束 -
close 监听 - 弹窗关闭 - 动画开始 -
closed 监听 - 弹窗关闭 - 动画结束 -

# 方法

# 通过 this.$refs.dialog1.xxx(); 方式调用

方法名 说明
close() 关闭 Drawer,会触发before-close
close({ beforeClose:false }) 关闭 Drawer,不触发before-close

# 插槽

name 说明
default Drawer 主内容
title Drawer 标题区的内容

插槽示例

<vk-data-drawer v-model="showDrawer" width="500px">
  <template v-slot:title>
    <view>
      这是标题的插槽
    </view>
  </template>
  <template v-slot:default>
    <view>
      这里是主内容插槽
    </view>
  </template>
</vk-data-drawer>
1
2
3
4
5
6
7
8
9
10
11
12