封装一个Drawers 抽屉弹窗组件

用elementui Drawer组件封装一个Drawers抽屉弹窗组件，里面新增了一些属性，例如框的宽度等

红色为Drawers组件

子组件Drawers

<template>
  <el-drawer
    v-if="showable"
    :visible.sync="showable"
    direction="rtl"
    :wrapperClosable="false"
    size="80%"
    :withHeader="false"
    :append-to-body="appendToBody"
    :modal="false"
    :destroy-on-close="true"
    :before-close="handleDrawerClose"
  >
    <slot></slot>

    <div class="close-box">
      <el-button
        class="btn_themeColor"
        type="primary"
        icon="el-icon-close"
        @click="handleDrawerClose"
      ></el-button>
    </div>
  </el-drawer>
  <!-- </div> -->
</template>
<script>
export default {
  props: {
    size: "",
    visible: {
      type: Boolean,
      default: false,
    },
    appendToBody: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      show: false,
      width: 0,
    };
  },
  created() {
    this.computedClosePos();
  },
  mounted() {},
  computed: {
    showable() {
      return this.show || this.visible;
    },
  },
  methods: {
    computedClosePos() {
      try {
        let right = (window.innerWidth * this.size.substr(0, 2)) / 100 + 50;
        this.width = right;
        document.querySelector(".el-drawer").style.minWidth = right + "px";
      } catch (error) {}
    },
    handleDrawerClose() {
      this.show = false;
      this.$emit("close");
      this.$emit("update:visible", false);
    },
  },
};
</script>
<style lang="scss" scoped>
@import "../../styles/variables.scss";

.btn_themeColor {
  background: $mainBgRs !important;
  border-color: $mainBgRs !important;
}

/deep/.el-drawer {
  padding-left: 50px;
  background: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  min-width: 1000px !important;
}

/deep/.el-drawer__body {
  padding: 30px;
  background-color: #fff;
  overflow-y: auto;
  -webkit-box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.2),
    0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12);
  box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.2),
    0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12);
}

/deep/.el-drawer__header {
  display: none;
}

.close-box {
  display: inline-block;
  width: 50px;
  height: 50px;
  position: absolute;
  top: 100px;
  left: 0;

  button {
    width: 50px;
    height: 50px;
    font-size: 20px;
    text-align: center;
  }
}

.title {
  height: 40px;
  margin-bottom: 20px;

  span {
    font-weight: bold;
    font-size: 16px;
    color: #101010;
    padding: 5px 10px;
    border-bottom: 4px solid #1e90ff;
  }
}

.btns {
  width: 100%;
  text-align: center;
  position: absolute;
  bottom: 30px;
}
</style>

父组件展示图片

父组件使用

<template>
	<div>
  	<div @click="clickView">查看</div>
    ...其他元素
    <Drawers ref="infoView" size="75%" @close="getDataList">
    	//其他元素
      <div>弹框内要展示的内容</div>
      //其他放在弹框内的子组件
    </Drawers>
  </div>
</template>

<script>
import Drawers from "@/components/Drawers/index.vue";
components: {Drawers,},
created() {
	this.getDataList()
},
methods: {
	// 获取数据列表
	getDataList() {
		this.dataListLoading = true

		if(this.searchForm.timeArray.length===2&&this.searchForm.timeArray[1]!==''&&this.searchForm.timeArray[1]!==null){

			this.searchForm.timeArray[1]=this.searchForm.timeArray[1].substring(0,10)+' 23:59:59';
	}

    fetchList(Object.assign({
    ...this.searchForm
    })).then(response => {
      this.dataList = response.data.data.records
      this.totalPage = response.data.data.total

      //导出使用
      this.tableNameSpace = this.$refs.table.columns;
      this.responseURL = response; //请求的链接
      this.filterCriteria = this.$refs.searchForm.fields;
    })
    this.dataListLoading = false
  },
   //新查看
    clickView() {
      this.$refs.infoView.show = true;
    },
}
  
</script>