用Loading 加载中的整页加载来做蒙层

Posted 2021-03-23 iwishicould

总结:遇见的bug

如何写一个蒙层
最初我打算的是自己写一个蒙层，但是写出来后，
不能够将整个屏幕全部覆盖。只能够覆盖 除【顶部导航】 和【左侧菜单栏】

于是我就使用了element-ui中的 【Loading 加载中】的【整页加载】来处理
推荐使用它来做蒙层 因为简单快

2==> 显示 显示区域无法水平垂直居中。
因为父级元素没有给height:100%;(重要)
父级元素不给高度100%；无法居中哈！

3==>最大问题 感觉关闭按钮 在蒙层之下，图片在蒙层之上。
整了很久，最后发现是按钮的颜色和蒙层相似。
我是如何发现的，给关闭按钮一个事件，如果事件能够被触发，
说明这个关闭按钮没有被蒙层覆盖

4==》loading.close(); //关闭蒙层
spinner: "none", //不要蒙层加载图标

<template>
  <div class="fatherbox">
    <!-- 触发蒙层按钮 -->
    <el-button type="primary" @click="openFullScreen2">服务方式</el-button>

    <!-- 显示区域 -->
    <div class="mask-box-content" v-show="flag">
      <div>
        <img src="../../../assets/image/bg.png" class="avtargeImg" />
      </div>
      <div @click="cancelMask">
        <i class="el-icon-circle-close my-icon-close"></i>
      </div>
    </div>
  </div>
</template>

<script>
// 
export default {
  data() {
    return {
      loading: "", //声明一个变量
      flag: false //蒙层默认关闭
    };
  },

  methods: {
    openFullScreen2() {
      this.loading = this.$loading({
        lock: true,
        spinner: "none", //不要蒙层加载图标
        background: "rgba(0, 0, 0, 0.5)"
      });
      this.flag = true; //打开蒙层
    },
    cancelMask() {
      this.loading.close(); //关闭蒙层
      this.flag = false; //关闭对话框；
    }
  }
};
</script>

.fatherbox {
  // 因为父级元素没有铺满整个屏幕
  // 所以无法居中
  height: 100%;
}
.mask-box-content {
  z-index: 1000000 !important;
  width: 400px;
  height: 460px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-top: -230px;
  margin: auto;
  transform: translate(-50%, -50%);
  text-align: center;
}
.my-icon-close {
  width: 44px;
  height: 44px;
  font-size: 44px;
  color: #fff;
  margin-top: 22px;
  text-align: center;
}
.avtargeImg {
  width: 400px;
  height: 400px;
  border-radius: 6px;
}