Vue出现弹出层时，禁止底部页面跟随滑动

背景：最近在写一个vue项目，当出现弹出层时，发现底部页面跟随滚动，但是产品不想要这种效果，于是找各种资料，发现很多说法，但是试了试，发现有的根本就不行，比如说有人提出用vue中提供的@touchmove.prevent方法来解决，但是我试了没起作用，或者@touchmove.prevent.stop也不起作用。下面是几种可以解决问题的方式，仅供参考：

1.在有弹出框的页面中，加上以下方法，弹出框出现时调用禁止滚动方法stopScroll()，弹出框去掉是调取允许滚动方法canScroll()即可，代码如下：

methods : {
   //禁止滚动
   stopScroll(){
        var mo=function(e){e.preventDefault();};
        document.body.style.overflow='hidden';
        document.addEventListener("touchmove",mo,false);//禁止页面滑动
    },
    /***取消滑动限制***/
    canScroll(){
        var mo=function(e){e.preventDefault();};
        document.body.style.overflow='';//出现滚动条
        document.removeEventListener("touchmove",mo,false);
    }
}

2.在全局js即main.js中，设置全局函数，在使用到的页面分别调用即可，代码如下：

//弹出框禁止滑动
Vue.prototype.stopScroll = function () {
  var mo = function (e) { e.preventDefault() }
  document.body.style.overflow = 'hidden'
  document.addEventListener('touchmove', mo, false)// 禁止页面滑动
}
 
//弹出框可以滑动
Vue.prototype.canScroll = function () {
  var mo = function (e) {
    e.preventDefault()
  }
  document.body.style.overflow = ''// 出现滚动条
  document.removeEventListener('touchmove', mo, false)
}

具体页面的调用方法如下：

 //当需要禁止弹出框底部内容滑动时调用：

  this.stopScroll()
 
  //当需要页面恢复滑动功能时调用：

  this.canScroll()

注：以上方法适用于vue项目的移动端，如果是PC，等我写到继续完善，或者大牛可以直接评论区留下你的方法，哈哈。