封装组件——抽屉drawer（vue+element）

<template>

  <el-drawer :title="title"
             :size='size'
             :visible.sync="showDrawer"
             ref='drawer'
             destroy-on-close
             :before-close='dbeforeClose'
             :append-to-body="appendBody"
             :wrapperClosable="wrapperClosable">
    <template #title>
      <!-- <slot name="anotherTitle"></slot> -->
      <slot name="title"></slot>
    </template>

    <div class="drawer-content"
         :style="{height: footerHide?'calc(100vh - 160px)':'calc(100vh - 220px)'}">
      <slot>

      </slot>
    </div>
    <div v-if="!footerHide"
         class="mt10 drawer-footer"
         :class="footerStyle ? 'footStyle' : ''">
      <div style="width:95%; text-align:right">
        <el-form size='small'>
          <el-button size="small"
                     @click="close">取消</el-button>

          <slot name="footer">
            <el-button size="small"
                       v-if="!disabled"
                       @click="save"
                       type="primary">{{saveTitle}}</el-button>
          </slot>
          <slot name="anotherFooter">
          </slot>
        </el-form>
      </div>
    </div>
  </el-drawer>

</template>

<script>
export default {
  name: "ScpspDrawer",
  props: {
    saveTitle: {
      type: String,
      default: "提交",
    },
    title: {
      type: String,
      default: "",
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    value: {
      type: Boolean,
      default: false,
    },
    size: {
      type: [Number, String],
      default: "1000px",
    },

    _params: {
      type: String,
      default: "params",
    },
    footerHide: {
      type: Boolean,
      default: false,
    },
    appendBody: {
      type: Boolean,
      default: false,
    },
    wrapperClosable: {
      type: Boolean,
      default: false,
    },
    footerStyle: {
      type: Boolean,
      default: false,
    },
  },
  model: {
    prop: "value",
    event: "setValue",
  },
  data() {
    return {
      // size: "1000px",
      //   parentParams: {},
      showRouteName: "",
      showDrawer: false,
      bc: null,
    };
  },

  methods: {
    dbeforeClose() {
      let beforeClose = this.$listeners.beforeClose;
      if (!beforeClose) {
        this.$emit("setValue", false);
        this.$emit("close");
      } else {
        this.$emit("beforeClose");
      }
    },
    close() {
      this.$refs.drawer.closeDrawer();
    },
    save() {
      this.$emit("save", (success = true) => {
        if (success) {
          this.$emit("setValue", false);
          this.$emit("close");
        }
      });
    },
  },

  created() {},

  async destroyed() {},
  mounted() {
    this.showDrawer = this.value;
    this.bc = this.beforeClose;
  },
  watch: {
    value(val) {
      this.showDrawer = val;
    },
  },
};
</script>


<style  lang="scss">
.drawer-content {
  overflow: auto;
  padding: 10px 20px 20px 20px;
}
</style>
<style >
.drawer-footer {
  /* position: fixed;
  background: #fff;
  bottom: 0px;
  z-index: 9999;
  width: 400px;
  right: 20px;
  padding: 10px 0 30px 0;
  text-align: right; */
}
.footStyle {
  height: 114px;
  line-height: 70px;
  box-shadow: 0px -3px 6px rgba(152, 152, 152, 0.16);
}
</style>