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

总结:遇见的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;

}

巴特西

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

总结:遇见的bug

最新文章

热门文章