vue弹窗后如何禁止滚动条滚动

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)
 
}

 

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

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

 this.stopScroll()

 //当需要页面恢复滑动功能时调用：

 this.canScroll()