弹窗时,禁止页面滑动
方法一:
<template>
<div class="userRoleSetting">
<!-- 辖区弹窗 -->
<div v-show="isShowLevelPop" @touchmove.prevent>
<div @click="isShowLevelPop = false" />
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
isShowLevelPop: false,
};
},
watch: {
isShowLevelPop(val) {
console.log("isShowLevelPop", val);
if (val) {
this.stopScroll();
} else {
this.startScroll();
}
},
},
created() {},
mounted() {},
activated() {},
methods: {
bodyScroll(event) {
event.preventDefault();
},
stopScroll() {
document.body.style.overflow = "hidden";
document.addEventListener("touchmove", this.bodyScroll, false);
},
startScroll() {
document.body.style.overflow = ""; // 出现滚动条
document.removeEventListener("touchmove", this.bodyScroll, false);
},
gradeClick(node, index) {
this.isShowLevelPop = true;
},
},
};
</script>
方法二:(未测试)
<template>
<div class="userRoleSetting">
<!-- 辖区弹窗 -->
<div v-show="isShowLevelPop" @touchmove.prevent>
<div @click="isShowLevelPop = false" />
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
isShowLevelPop: false,
};
},
watch: {
isShowLevelPop(val) {
var mo = function (e) {
e.preventDefault();
};
if (val) {
document.body.style.overflow = ""; //出现滚动条
document.removeEventListener("touchmove", mo, false);
} else {
document.body.style.overflow = "hidden";
document.addEventListener("touchmove", mo, false); //禁止页面滑动
}
},
},
created() {},
mounted() {},
activated() {},
methods: {
},
};
</script>