Drawer 抽屉（齐思博）

基础用法

点击打开抽屉

这是抽屉主体内容

需要设置visible属性，它接收Boolean，当为true时显示Drawer。

<template>
    <div>
      <h-button type="first" @click="showDrawer">点击打开抽屉</h-button>
      <h-drawer 
        :visible.sync="visibleDrawer"
        :size="600"
        :title="1122"
      >
      <div style="height: 800px">这是抽屉主体内容</div>
    </h-drawer>
  </div>
</template>
<script>
export default {
  data() {
    return {
      visibleDrawer: false
    }
  },
  methods: {
    showDrawer() {
      this.visibleDrawer = true
    }
  },
}
</script>

显示代码

自定义

Drawer分为三个部分：title、body和footer，footer需要具名为footer的slot。title属性用于定义标题或者使用具有名为title的slot。

点击打开抽屉

自定义title title标题

这是抽屉主体内容

取消 提交

<template>
  <div>
    <h-button type="first" @click="showDrawer">点击打开抽屉</h-button>
    <h-drawer 
      :visible.sync="visibleDrawer"
      :footer="true"
      :size="600"
    >
      <div slot="title">自定义title <h-button type="first">title标题</h-button></div>
      <div style="height: 800px">这是抽屉主体内容</div>
      <div slot="footer">
        <h-button type="second" style="margin-right: 8px" @click="hideDrawer">取消</h-button>
        <h-button type="first" @click="hideDrawer">提交</h-button>
      </div>
    </h-drawer>
  </div>
</template>
<script>
export default {
  data() {
    return {
      visibleDrawer: false
    }
  },
  methods: {
    showDrawer() {
      this.visibleDrawer = true
    },
    hideDrawer() {
      this.visibleDrawer = false
    }, 
  },
}
</script>

显示代码

Attributes（支持elementUI-Drawer抽屉所有配置）

参数	说明	类型	可选值	默认值
footer	是否展示底部区域	boolean	—	false
wrapperClosable	点击遮罩层是否可以关闭 Drawer	boolean	—	false
close-on-press-escape	是否可以通过按下 ESC 关闭 Drawer	boolean	—	false

Slot

name	说明
—	内容区
title	标题区内容
footer	底部区内容
innerFooter	底部区内容(嵌套使用抽屉组件时使用此插槽渲染底部)

Methods

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

Events

方法名	说明	参数
open	Drawer 打开的回调	-
opened	Drawer 打开动画结束时的回调	-
close	Drawer 关闭的回调	-
closed	Drawer 关闭动画结束时的回调	-