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