封装element-ui中的Drawer（抽屉）

之前我都不知道有drawer这个方法，平常对于那些弹框我一般习惯用dialog这个组件。然而前几天，我发现，drawer也用起来不错，便想起来，把他封装起来，好复用。下面呢，就直接上代码了

<template>
  <el-drawer
    :title="title"
    :visible.sync="drawer"
    :custom-class="className"
    :modal-append-to-body="false"
    :size="outSize"
    @close="closeDrawer"
  >
    <slot></slot>
    <div slot="title">
      {{ title }}
      <slot name="header"></slot>
    </div>
    <p class="buttons" v-if="isShowBtn">
      <el-button class="btn yesBtn" @click="saveInfo">{{
        commitBtnText // 确定按钮
      }}</el-button>
        <el-button class="btn closeBtn reset" v-if="isRejectBtn" @click="reject"
          >审批不通过</el-button
        >
      <el-button
        class="btn closeBtn reset"
        v-if="!isRejectBtn"
        @click="cancle"
        >{{ cancelName }}</el-button
      >
    </p>
  </el-drawer>
</template>

<script>
export default {
  name: "gbDrawer",
  data() {
    return {
      drawer: false,
      innerDrawer: false,
      outSize: "50%",
    };
  },
  mounted() {
    this.outSize = this.size;
  },
  props: {
    size: {
      type: String,
      default: "50%",
    },
    title: {
      type: String,
      default: "",
    },
    hasChildren: {
      type: Boolean,
      default: () => {
        return false;
      },
    },
    subSize: {
      type: String,
      default: "50%",
    },
    subTitle: {
      type: String,
      default: "",
    },
    isShowBtn: {
      type: Boolean,
      default: () => {
        return true;
         },
    },
    isRejectBtn: {
      //是否是审批驳回按钮
      type: Boolean,
      default: () => {
        return false;
      },
    },
    commitBtnText: {
      type: String,
      default: "确定",
    },
    cancelName: {
      type: String,
      default: "取消",
    },
    className: {
      type: String,
      default: "drawerClass",
    },
  },
  watch: {
    drawer: function (newvalue, oldvalue) {
      if (newvalue == true && newvalue != oldvalue) {
        this.outSize = this.size;
      }
    },
  },
  methods: {
    //保存
    saveInfo() {
      this.$emit("saveInfo");
    },
    //取消
    cancle() {
      this.drawer = false;
      this.$emit("cancleInfo");
    },
    //驳回
    reject() {
      this.$emit("rejectOrder");
    },
    //关闭弹框
    closeDrawer() {
      this.$emit("closeDrawer");
    },
  },
};
</script>
<style lang="less" scoped>
.drawerClass {
  transition: width 300ms;
  -webkit-transition: width 300ms;
}

.addOrder /deep/ .el-drawer__header {
  display: none;
  margin-bottom: 0;
}

.el-drawer__header {
  margin-bottom: 15px;
}

.buttons {
  width: 100%;
  position: absolute;
  bottom: 0;
  height: 60px;
  line-height: 60px;
  padding-right: 25px;
  text-align: right;
  border-top: 4px solid #eeeeee;
}
</style>

而我也亲自使用过，非常好用。
接下来便说说，怎么去使用呢？

<template>
  <div>
    <gb-drawer ref="drawer" size="60%" :title="title" isRejectBtn commitBtnText="审核通过" @saveInfo="saveBusiness"
      @closeDrawer="closeDrawer" @rejectOrder="rejectOrder">
      需要的内容
    </gb-drawer>
  </div>
</template>

<script>
  export default {
    data(){
      return {
        title:'测试'
      }
    }
  }
</script>

<style>
</style>

效果
最终的效果和element-ui上的差不多。

上面的便是对它的封装以及使用。如有不足，也请联系我。

标签：return,String,drawer,default,element,Drawer,ui,false,type
来源： https://blog.csdn.net/weixin_46419373/article/details/115246504