vue+iview+drawer , vue抽屉效果

前言：

        iview+抽屉效果，通过class来控制内容需要展示的内容

效果展示图：

第一：封装的组件cdrawer.vue

<template>
    <Drawer 
        v-model="drawerVal"
        :class-name='className'
        :mask='mask'
        :mask-style='maskStyle'
        :styles='styles'
        :width='width'
        :title="title"
        :closable='closable'
        :mask-closable='maskClosable'
        :scrollable='scrollable'
        :placement='placement'
        :transfer='transfer'
        :inner='inner'
        @on-close='closeDrawer'
        @on-visible-change='visibleChange'
    >
         <!-- slot 添加自定义配置项 -->
        <slot :name="conSlotName"></slot>
        <div class="drawerContent">
            <safeCon v-if="className == 'safeDrawer'" class="drawerDiv" @cancel='closeDrawer'></safeCon>
        </div>
    </Drawer>
</template>

<script>
  import safeCon from '../common/safeDrawer'//上传
  export default {
    name:'drawer',//抽屉效果
    props:{
        drawerVal :{ //抽屉是否显示
            type: Boolean,
            default: false
        },
        mask :{ //是否显示遮罩层
            type: Boolean,
            default: true
        },
        closable:{ //是否显示右上角的关闭按钮
            type: Boolean,
            default: false
        },
        maskClosable:{ //是否允许点击遮罩层关闭
            type: Boolean,
            default: true
        },
        scrollable:{ //页面是否可以滚动
            type: Boolean,
            default: false
        },
        transfer:{ //是否将抽屉放置于 body 内
            type: Boolean,
            default: true
        },
        inner:{ //是否设置抽屉在某个元素内打开，开启此属性时，应当关闭 transfer 属性
            type: Boolean,
            default: false
        },
        maskStyle:Object,//遮罩层样式
        styles:Object,//抽屉中间样式
        width: Number | String,//当其值不大于 100 时以百分比显示，大于 100 时为像素
        placement:String,//抽屉的方向，可选值为 left 或 right
        title:String,//抽屉标题，如果使用 slot 自定义了页头，则 title 无效
        className:String,//在这里设置class名除了更改样式需要，选择内容也需要

    },
    data () {
      return {

      }
    },

    components: {
        safeCon
    },

    computed: {},

    beforeMount() {},

    mounted() {},

    methods: {
        closeDrawer(){//关闭抽屉时触发
            this.$emit('closeDrawer');
        },
        visibleChange(data){//状态发生改变触发
             this.$emit('visibleChange',data);
        }
    },

    watch: {}

  }

</script>
<style lang='less' scoped>
    .drawerContent,.drawerDiv{
           width:100%;
           height:100%;
    }
</style>

第二：内容模板组件safeDrawer.vue 

<template>
  <div class="safeDiv">
    <div class="content">
        <label class="label">标题</label>
        <Input clearable placeholder="请输入标题" v-model="sousoText"/> 
        <label class="label">附件</label>
    </div>
    <div class="checkDiv">
      <Button @click="cancel">取消</Button>
      <Button @click="uploadFile">上传</Button>
    </div>
  </div>
</template>

<script>
  export default {
    name:'safe-drawer',//安全日活动内容
    props:[''],
    data () {
      return {
        sousoText:'',
      };
    },

    components: {

    },

    computed: {},

    beforeMount() {},

    mounted() {},

    methods: {
      cancel(){//点击取消事件
        this.$emit('cancel');
      },
      uploadFile(){//点击上传事件
        this.$emit('cancel');
      }
    },

    watch: {}

  }

</script>
<style lang='less' scoped>
  .safeDiv{
    width:100%;
    height:100%;
    .content{
      height:90%;
    }
    .checkDiv{
      text-align: right;
      .ivu-btn{
        width: 5.21vw;
        height: 3.85vh;
        font-size: 14px;
        background:#2F75EC ;
        border-color:#2F75EC;
        color:#fff;
        &:first-child{
          border: 0;
          color:#4285F4;
          background:#fff;
        }
         &:first-child:focus{
            box-shadow:none;
         }
      }
    }
  }
</style>

第三：调用部分

//template部分
                <Button size="large" type="primary" @click="getUploadData">上传</Button>
                <CDrawer 
                    :drawerVal='drawer.value' 
                    :className="drawer.class" 
                    :width="'429px'"
                    :title="drawer.title"
                    @closeDrawer='closeDrawer' 
                ></CDrawer>

//js部分
      data() {
            return {
                 drawer:{
                    value:false,//是否打开抽屉
                    class:'',//根据class来选取内容
                    title:'',//头部提示内容
                }
        }}
     methods: {
         getUploadData(){//点击上传事件
                this.drawer.class='safeDrawer',
                this.drawer.title='上传',
                this.drawer.value=true;
           },
         closeDrawer(){//关闭抽屉事件
                this.drawer.value=false;
            },
        }