Drawer 抽屉

• 通过before-close可以在关闭前阻止关闭，调用hide方法后可以直接关闭。也可以通过return true来快捷设置。支持异步

点击打开 我来啦!

<template>
  <div>
    <higher-radio
      v-model="direction"
      :list="options"
      style="margin-bottom:20px;"
    />
    <db-button  @click="drawer = !drawer">点击打开</db-button>
    <db-drawer
      title="我是标题"
      :direction="direction"
      size="40%"
      :before-close="handleCloseDrawer"
      v-model="drawer">
      <span>我来啦!</span>
      <template v-slot:actions>
        <db-button type="low" @click="drawer = false">取消</db-button>
        <db-button>确定</db-button>
      </template>
    </db-drawer>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        drawer: false,
        direction: 'right',
        options: [
          {
            label: '上',
            value: 'top'
          },
          {
            label: '下',
            value: 'bottom'
          },
          {
            label: '左',
            value: 'left'
          },
          {
            label: '右',
            value: 'right'
          }
        ]
      };
    },
    methods: {
      async handleCloseDrawer(hide) {
        // hide() 调用直接关闭
        return await this.$db_confirm('确定关闭吗？')
      }
    }
  };
</script>

Expand Copy Copy

Drawer Attributes

参数	说明	类型	可选值	默认值
before-close	关闭前的回调，会暂停 Drawer 的关闭	function(done)，done 用于关闭 Drawer	—	—
close-on-press-escape	是否可以通过按下 ESC 关闭 Drawer	boolean	—	true
direction	Drawer 打开的方向	Direction	left / right / top / bottom	right
show-close	是否显示关闭按钮	boolean	—	true
size	Drawer 窗体的大小	string	-	'30%'
max-size	Drawer 窗体的最大大小	string	-	'30%'
title	Drawer 的标题，也可通过具名 slot （见下表）传入	string	—	—
wrapperClosable	点击遮罩层是否可以关闭 Drawer	boolean	-	true
action-align	操作对齐	boolean/string	false	start/end

Drawer Slot

name	说明
—	Drawer 的内容
title	Drawer 标题区的内容

Drawer Methods

name	说明
closeDrawer	用于关闭 Drawer, 该方法会调用传入的 before-close 方法

Drawer Events

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