vue自定义遮罩层并隐藏滚动条

<template>
  <div>
    <!-- 打开遮罩层内容调用openMask(),关闭遮罩层调用closeMsk() -->
    <button @click="openMask()">打开遮罩层</button>
    <div class="mask-overall" v-if="showMask">
      <!-- 遮罩层里面的内容 -->
      <div class="mask-main">
        <button @click="closeMsk()">关闭遮罩层</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showMask:false
    }
  },
  watch: {
    showMask(newVal){
      if(newVal){
        this.stop()
      }else{
        this.move()
      }
    },
  },
  methods: {
    openMask(){
      this.showMask=true
    },
    closeMsk(){
      this.showMask=false
    },
    stop(){
      var mo=function(e){e.preventDefault();};
      document.body.style.overflow='hidden';
      document.addEventListener("touchmove",mo,false);//禁止页面滑动
    },
     /***取消滑动限制***/
    move(){
      var mo=function(e){e.preventDefault();};
      document.body.style.overflow='';//出现滚动条
      document.removeEventListener("touchmove",mo,false);
    }
  },
}
</script>

<style lang="scss" scoped>
.mask-overall{
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1000;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.65);
  height: 100%;
  animation: move .3s linear;
  animation-fill-mode:forwards;
  @keyframes move{
    0%{opacity:0;}
    100%{opacity:1;}
  }
  .mask-main{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 200px;//大小可自己定义
    height: 200px;
    background-color: #fff;
  }
}
</style>