实现uniapp遮罩层

首先uniapp没有官方的遮罩层mask组件， 需要手搓一个。

//结构	
<view class="mask" v-if="isshowmask" @click="closemask" @touchmove.stop.prevent="">	
<image :src="image"  class="qcodeimg" ></image>
</view>


// 样式
	.mask{
		position: fixed;
		top:0;
		left:0;
		z-index:999;
		width:100%;
		height:100vh;
		background:rgba(0,0,0,0.4);
		display: flex;
		justify-content: center;
		align-items: center;
		.qcodeimg{
			width: 600rpx;
			height: 600rpx;
		}
	}

通过isshowmask控制遮罩层的显示。

这样做会有两个问题：

1.遮罩层中经常要显示东西，此时点击显示内容区域也会关闭遮罩层

2.遮罩层下方的页面内容依旧可以点击和滑动

解决方法：

1. 阻止内容区域的冒泡事件，给内容区域添加 @click.stop
2. 给遮罩层添加@touchmove.stop.prevent="" 这种方法是官方推荐的

介绍 | uni-app官网uni-app,uniCloud,serverlesshttps://uniapp.dcloud.net.cn/tutorial/vue-basics.html#%E4%BA%8B%E4%BB%B6%E4%BF%AE%E9%A5%B0%E7%AC%A6

修改完成后的代码：

// 结构
<view class="mask" v-if="isshowmask" @click="closemask" @touchmove.stop.prevent="">
				<image :src="image"  class="qcodeimg" @click.stop></image>
		</view>

// 样式
	.mask{
		position: fixed;
		top:0;
		left:0;
		z-index:999;
		width:100%;
		height:100vh;
		background:rgba(0,0,0,0.4);
		display: flex;
		justify-content: center;
		align-items: center;
		.qcodeimg{
			width: 600rpx;
			height: 600rpx;
		}
	}