052_Drawer抽屉

1. Drawer抽屉

1.1. 有些时候, Dialog组件并不满足我们的需求, 比如你的表单很长, 亦或是你需要临时展示一些文档, Drawer拥有和Dialog几乎相同的API, 在UI上带来不一样的体验。

1.2. Drawer Attributes

参数	说明	类型	可选值	默认值
append-to-body	Drawer自身是否插入至body元素上。嵌套的Drawer必须指定该属性并赋值为true	boolean	无	false
before-close	关闭前的回调, 会暂停Drawer的关闭	function(done), done用于关闭Drawer	无	无
close-on-press-escape	是否可以通过按下ESC关闭Drawer	boolean	无	true
custom-class	Drawer的自定义类名	string	无	无
destroy-on-close	控制是否在关闭Drawer之后将子元素全部销毁	boolean	无	false
modal	是否需要遮罩层	boolean	无	true
modal-append-to-body	遮罩层是否插入至body元素上, 若为false, 则遮罩层会插入至Drawer的父元素上	boolean	无	true
direction	Drawer打开的方向	Direction	rtl / ltr / ttb / btt	rtl
show-close	是否显示关闭按钮	boolean	无	true
size	Drawer窗体的大小, 当使用number类型时, 以像素为单位, 当使用string类型时, 请传入'x%', 否则便会以number类型解释	number / string	无	'30%'
title	Drawer的标题, 也可通过具名slot(见下表)传入	string	无	无
visible	是否显示Drawer, 支持.sync修饰符	boolean	无	false
wrapperClosable	点击遮罩层是否可以关闭Drawer	boolean	无	true
withHeader	控制是否显示header栏, 默认为true, 当此项为false时, title attribute和title slot均不生效	boolean	无	true

1.3. Drawer Slot

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

1.4. Drawer Methods

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

1.5. Drawer Events

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

2. Drawer抽屉例子

2.1. 使用脚手架新建一个名为element-ui-drawer折叠面板的前端项目, 同时安装Element插件。

2.2. 编辑index.js 

import Vue from 'vue'
import VueRouter from 'vue-router'
import Drawer from '../components/Drawer.vue'
import NoneTitleDrawer from '../components/NoneTitleDrawer.vue'
import MyselfDrawer from '../components/MyselfDrawer.vue'
import AppendDrawer from '../components/AppendDrawer.vue'

Vue.use(VueRouter)

const routes = [
  { path: '/', redirect: '/Drawer' },
  { path: '/Drawer', component: Drawer },
  { path: '/NoneTitleDrawer', component: NoneTitleDrawer },
  { path: '/MyselfDrawer', component: MyselfDrawer },
  { path: '/AppendDrawer', component: AppendDrawer }
]

const router = new VueRouter({
  routes
})

export default router

2.3. 在components下创建Drawer.vue

<template>
  <div>
    <h1>基本用法</h1>
    <h4>需要设置visible属性, 它的类型是boolean, 当为true时显示Drawer。Drawer分为两个部分: title和body, title需要具名为title的slot, 也可以通过title属性来定义, 默认值为空。需要注意的是, Drawer默认是从右往左打开, 当然可以设置对应的direction。</h4>
    <el-radio-group v-model="direction">
      <el-radio label="ltr">从左往右开</el-radio>
      <el-radio label="rtl">从右往左开</el-radio>
      <el-radio label="ttb">从上往下开</el-radio>
      <el-radio label="btt">从下往上开</el-radio>
    </el-radio-group>

    <el-button @click="drawer = true" type="primary" style="margin-left: 16px;">点我打开</el-button>

    <el-drawer title="我是标题" :visible.sync="drawer" :direction="direction" :before-close="handleClose">
      <span>我来啦!</span>
    </el-drawer>
  </div>
</template>

<script>
export default {
  data () {
    return {
      drawer: false,
      direction: 'rtl'
    }
  },
  methods: {
    handleClose (done) {
      this.$confirm('确认关闭?')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    }
  }
}
</script>

2.4. 在components下创建NoneTitleDrawer.vue

<template>
  <div>
    <h1>不添加Title</h1>
    <h4>当遇到不需要title的场景时, 可以通过withHeader这个属性来关闭掉title的显示, 这样可以留出更大的空间给到用户, 为了用户的可访问性, 请务必设定title的值。</h4>
    <el-button @click="drawer = true" type="primary" style="margin-left: 16px;">点我打开</el-button>
    <el-drawer title="我是标题" :visible.sync="drawer" :with-header="false">
      <span>我来啦!</span>
    </el-drawer>
  </div>
</template>

<script>
export default {
  data () {
    return {
      drawer: false
    }
  }
}
</script>

2.5. 在components下创建MyselfDrawer.vue

<template>
  <div>
    <h1>自定义内容</h1>
    <h4>和Dialog组件一样, Drawer同样可以在其内部嵌套各种丰富的操作。</h4>
    <el-button type="text" @click="table = true">打开嵌套表格的 Drawer</el-button>
    <el-button type="text" @click="dialog = true">打开嵌套 Form 的 Drawer</el-button>
    <el-drawer title="我嵌套了表格!" :visible.sync="table" direction="rtl" size="50%">
      <el-table :data="gridData">
        <el-table-column property="date" label="日期" width="150"></el-table-column>
        <el-table-column property="name" label="姓名" width="200"></el-table-column>
        <el-table-column property="address" label="地址"></el-table-column>
      </el-table>
    </el-drawer>

    <el-drawer title="我嵌套了 Form !" :before-close="handleClose" :visible.sync="dialog" direction="rtl" custom-class="demo-drawer" ref="drawer">
      <div class="demo-drawer__content">
        <el-form :model="form">
          <el-form-item label="活动名称" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="活动区域" :label-width="formLabelWidth">
            <el-select v-model="form.region" placeholder="请选择活动区域">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div class="demo-drawer__footer">
          <el-button @click="cancelForm">取 消</el-button>
          <el-button type="primary" @click="$refs.drawer.closeDrawer()" :loading="loading">{{ loading ? '提交中 ...' : '确 定' }}</el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
export default {
  data () {
    return {
      table: false,
      dialog: false,
      loading: false,
      gridData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }],
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      formLabelWidth: '80px',
      timer: null
    }
  },
  methods: {
    handleClose (done) {
      if (this.loading) {
        return
      }
      this.$confirm('确定要提交表单吗?')
        .then(_ => {
          this.loading = true
          this.timer = setTimeout(() => {
            done()
            // 动画关闭需要一定的时间
            setTimeout(() => {
              this.loading = false
            }, 400)
          }, 2000)
        })
        .catch(_ => {})
    },
    cancelForm () {
      this.loading = false
      this.dialog = false
      clearTimeout(this.timer)
    }
  }
}
</script>

2.6. 在components下创建AppendDrawer.vue

<template>
  <div>
    <h1>多层嵌套</h1>
    <h4>同样, 如果你需要嵌套多层Drawer请一定要设置append-to-body属性为true。</h4>
    <el-button @click="drawer = true" type="primary" style="margin-left: 16px;">点我打开</el-button>
    <el-drawer title="我是外面的 Drawer" :visible.sync="drawer" size="50%">
      <div>
        <el-button @click="innerDrawer = true">打开里面的!</el-button>
        <el-drawer title="我是里面的" :append-to-body="true" :before-close="handleClose" :visible.sync="innerDrawer">
          <p>我打...</p>
        </el-drawer>
      </div>
    </el-drawer>
  </div>
</template>

<script>
export default {
  data () {
    return {
      drawer: false,
      innerDrawer: false
    }
  },
  methods: {
    handleClose (done) {
      this.$confirm('还有未保存的工作哦确定关闭吗?')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    }
  }
}
</script>

2.7. 运行项目, 访问http://localhost:8080/#/Drawer

2.8. 运行项目, 访问http://localhost:8080/#/NoneTitleDrawer 

2.9. 运行项目, 访问http://localhost:8080/#/MyselfDrawer 

2.10. 运行项目, 访问http://localhost:8080/#/AppendDrawer