During the development process, it is a very common requirement to click to pop up the occlusion layer, but in many cases the bottom part can still slide after the occlusion layer pops up. The solution:
The following is my previous article that can be solved: (a total of three methods)
1. Vue.js handwritten method to solve the problem: https://blog.csdn.net/weixin_44296929/article/details/103559069
2. Use @touchmove.prevent to solve the problem: https://blog.csdn.net/weixin_44296929/article/details/106613963
3. Later I found out that I implemented a concise version with watch:
/* 蒙层样式 */
.mask{
background-color: #000;
filter: alpha(opacity=60);
opacity: 0.6;
width: 100%;
height: 100%;
position: fixed;
left: 0;
top: 0;
z-index: 2;
}
<template v-if="show_mask">
<div class="mask"></div><!-- 遮罩层 -->
</template>
Use watch to monitor the showmask in the data. Once showmask is true, the overflow attribute of the body will be changed to hidden, and if it is false, it will become auto, which is very convenient.
var vm = new Vue({
el: "#ecall_h_vue",
data(){
return{
showmask: false
}
},
watch:{
'show_mask':{
handler:function(){
if(this.show_mask == true){
$("body").css("overflow","hidden");
}else{
$("body").css("overflow","auto");
}
},
deep:true
},
}
})