Element组件浅尝辄止1：抽屉组件

平时开发中涉及弹窗的情景，一般都会选用dialog组件，其内部封装的相当优雅，方便我们使用；

但是当你的文本内容或表单很长, 亦或是你需要临时展示一些图标或文档，Dialog 组件可能并不满足我们的需求，这时可以用抽屉组件Drawer来解决问题。

1.啥是抽屉组件？ 

简单理解就是用来弥补当弹窗内容过多，导致dialog组件不太完美 的场景。

2. 如何使用抽屉组件？

1. 基本的element UI引入

/*需要设置 visible 属性，它的类型是 boolean,当为 true 时显示 Drawer。
Drawer 分为两个部分：title 和 body，title 需要具名为 title 的 slot, 
也可以通过 title 属性来定义，默认值为空。需要注意的是, Drawer 默认是从右往左打开, 
当然可以设置对应的 direction*/

<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>

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

和 Dialog 组件一样, Drawer 同样可以在其内部嵌套各种丰富的操作,比如显示表格或表单

还可以通过官方文档定制drawer的显示方式 ，具体可查阅抽屉组件