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

最近做VUE发现在图层滑动上，不能阻止下层滑动，还停留在以前的css样式控制上。

转自：https://blog.csdn.net/wh_xmy/article/details/89492622

背景：最近在写一个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()

以上博主功能使用后，发现会报错误，Unable to preventDefault inside passive event listener due to target being treated as passive. See

原因大家可以找一下，我在简书里找到一个解决方法，验证了一下，解决了报错问题。