vue实现遮罩层禁止点击禁止滚动
先看效果图
直接上代码
html
遮罩层
<div class="mask" @touchmove.prevent @click="mask=false" v-if="mask == true">
//点击自身是关闭
<div class="maskImg">
<img src="../../static/fxhy.png" alt />
</div>
</div>
<div @click="mask=false">点击打开遮罩层</div>
css
.mask {
position: fixed;
width: 100%;
height: 100vh;
top: 0;
left: 0;
z-index: 10000;
background: rgba(0, 0, 0, 0.75);
box-shadow: 0 4px 10px 0 rgba(51, 51, 51, 0.2);
}
.maskImg {
position: fixed;
top: 0;
right: 40upx;
z-index: 100000;
width: 507upx;
}
.maskImg img {
width: 100%;
}
js
data() {
return {
mask: false, //分享遮罩层 设置默认为关闭
};
},
@touchmove.prevent就可以帮我们实现禁止点击
给body设置overflow: hidden; 就可以实现禁止滚动啦。
<div class="mask" @touchmove.prevent v-if="mask==true" @click="mask=false">
修改body样式用vue 的watch监听方法,用原声js的选择器来选择标签
watch: {
mask: function (newVal) {
if (newVal) {
document.querySelector("body").style.overflow = "hidden";
}
if (!newVal) {
document.querySelector("body").style.overflow = "visible";
}
},
},
这是一个自己随手写的比较简单的,大家有更好的意见欢迎提出。