vue 有弹层时，实现页面不滚动

项目里有个全屏的弹窗，然后弹窗下面手指滑动，页面仍然在滚动。 解决代码如下：

</template>
<script>
var preD = function(e) {
  e.preventDefault();
};
export default {  
  props: ["active"],
  watch: {
    active(flag) {
      if (flag) {
        document.body.style.overflow = "hidden";
        document.addEventListener("touchmove", preD, { passive: false }); //禁止页面滑动
      } else {
        document.body.style.overflow = ""; //出现滚动条
        document.removeEventListener("touchmove", preD, { passive: false });
      }
    }
  }
 
};
</script>
<style lang="scss" scoped>

弹窗组件接受父组件传递的active判断是否需要禁止屏幕滚动