Vue · 遮罩层：禁止滑动

弹窗时，禁止页面滑动

方法一：

<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>