手写遮罩层

（注：图文不符，仅供参考） 

遮罩层原理

        就是当出现弹窗或者确认框的时候，点击弹窗外的地方不会触发别的响应，只是单纯地关闭弹窗（或者不关闭也不触发其他响应）

---

遮罩层的简单写法

        任意定义一个div盒子，盒子范围根据需求自定义；设置position定位属性，初始z-index为“-1”，当弹窗或者确认框显示时，提高遮罩层盒子的层级；弹窗关闭时，再将遮罩层的层级调回“-1”。遮罩层的颜色的背景颜色可以按照需求自定义。

---

参考代码

<template>
	<div>
		<div class="mask" ref="mask" style="z-index: -1;" @click.stop="doNothing"></div>  <!--遮罩层-->
		<button @click="showComdirm">弹出确认框</button>
		<div class="popup" v-if=" comfirmIsShow " @click.stop="doNothing">
			<h5>确认这样修改吗？</h5>
			<div class="btn">
				<button @click.stop="no">取消</button>
				<button @click.stop="yes">确定</button>
			</div>
		</div>
	</div>
</template>
<script>
export default {
	data: function() {
		return {
			comfirmIsShow: false;  //弹窗是否展示
		};
	},
	created(){},
	methods: {
		showComdirm(){
			this.comfirmIsShow = true;
			this.$refs.mask.style.zIndex = 10;  //根据ref获取遮罩层盒子的style属性，修改层级
		},
		doNothing(){  //点击遮罩层区域，不做任何处理。
			return;
		},
		no(){   //取消操作，关闭弹窗，恢复遮罩层初始层级
			this.comfirmIsShow = false;
			this.$refs.mask.style.zIndex = -1;
		},
		yes(){
			/* 一些操作 */;
			this.comfirmIsShow = false;
			this.$refs.mask.style.zIndex = -1;
		}
	}
};
</script>
<style scoped>
.mask{
    position: absolute;
    top: -194px;
    left: 0;
    width: 100%;
    height: 710px;
}
</style>

 修改遮罩层层级的方法：（通过$refs获取）this.$refs.mask.style.zIndex = 10; 

注意：mask遮罩层的层级要写在style属性里面

---

遮罩层：遮罩层背景颜色与内层透明底图片背景颜色冲突（opacity属性踩坑）

踩坑原因：

        在设置父盒子背景颜色的时候设置了透明度opacity属性小于1，如图中的灰色用以下代码表示；子元素会继承父元素的该属性，导致透明度也<1，展示出来就不够清晰。

参考文章解释~

opacity: 0.4;
background: #000000;

解决办法：

• 父元素的颜色采用rgba的形式（在）

rgba（0，0，0，0.4）

• 找到这个透明度为0.4的黑色，用16进制表示的方法，（如果设计稿给的颜色是透明度为1的十六进制颜色，那么我们可以参照下面的透明度表，补上后面两位代表透明度） 

参考文章~

• 如上面的颜色，我们可以先知道设计稿的颜色是：#000000 ，opacity：0.4
• 透明度0.4，参照表格用十六进制表示为： 66
• 所以结合起来这个颜色就是：#00000066

 （受到父元素opacity影响的颜色）

  （修正后的显示情况）