封装一个Drawers 抽屉弹窗组件

  
    

    

      
    
  
  


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);
    },
  },
};


@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;
}

	

  	
查看
    ...其他元素
    
    	//其他元素
      
弹框内要展示的内容
      //其他放在弹框内的子组件
    
  



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.t服务器托管网imeArray[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;
    },
}