vue遮罩层滚轮穿透

在 Vue 中，可以使用 `v-show` 和 `v-if` 来控制遮罩层的显示和隐藏，同时使用 `position: fixed` 将其固定在页面上。为了防止滚动穿透，可以给遮罩层的父元素设置 `overflow: hidden`，这样在遮罩层出现时，页面的滚动条就会被隐藏掉，避免了滚动穿透的问题。

以下是一个示例代码：

<template>
  <div>
    <button @click="showMask">显示遮罩层</button>
    <div class="mask" v-show="isShowMask"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShowMask: false
    }
  },
  methods: {
    showMask() {
      this.isShowMask = true
      document.body.style.overflow = 'hidden'
    },
    hideMask() {
      this.isShowMask = false
      document.body.style.overflow = ''
    }
  },
  watch: {
    isShowMask(val) {
      if (val) {
        document.body.style.overflow = 'hidden'
      } else {
        document.body.style.overflow = ''
      }
    }
  }
}
</script>

<style>
.mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
}
</style>

在上述代码中，点击按钮 `showMask` 会将 `isShowMask` 设置为 `true`，这样遮罩层就会显示出来，并且页面的滚动条会被隐藏。当遮罩层被隐藏时，需要将 `isShowMask` 设置为 `false`，并且恢复页面的滚动条。同时，使用 `watch` 监听 `isShowMask` 的变化，当其发生变化时，根据其值来控制页面滚动条的显示和隐藏。