element ui drawer（抽屉）二次封装

在使用vue+element做项目的时候，对于多次复用的组件，我们可以封装一下，这样效率更高，代码更简介，废话少说，上代码！

在components文件夹里面创建一个drawer.vue文件，名字是自定义了。

<template>
  <div class="outter_drawer">
    <el-drawer
      :title="drawerObj.title"
      :visible.sync="drawerObj.drawer"
      :append-to-body="true"
      :destroy-on-close="true"
      :wrapperClosable="false"
      :size='drawerObj.size'
      @close="f_close">
      <div class="outter_inner_box">
        <slot></slot>
      </div>
    </el-drawer>
  </div>
</template>

对照这element ui 抽屉的方法添加或减少，改成自己的要用的方法

<template>
 <div>



       .......页面的内容





        
           <outter-drawer :drawerObj="drawerObj">
            <template v-slot:default>
                  //抽屉里面要展示的组件
                <firm :drawerObj="drawerObj" :ruleForm="ruleForm"></firm>
            </template>
        </outter-drawer>
    </div>
</template>

<script >
import outterDrawer from './components/drawer.vue'
import firm from './components/firm.vue'
export default {
    components:{firm,outterDrawer},
    data(){
        return{
            drawerObj:{
                size:"900px",//抽屉大小
                drawer:false,//控制抽屉展开
                title:'公司详情'//抽屉的标题名
            },
        }
    }
}

在有需要用到抽屉的地方，直接引用就可以使用了。