1.添加在uitil.js文件中

// 阻止页面滚动
export function stop(){
  var box=function(e){passive: false ;};
  document.body.style.overflow='hidden';
  document.addEventListener("touchmove",box,false);
}
// 允许页面滚动
export function move(){
  var box=function(e){passive: false };
  document.body.style.overflow=''; // 出现滚动条
  document.removeEventListener("touchmove",box,false);
}

2.绑定在原型上,在main.js

import {stop,move} from '@/utils/utils.js'
Vue.prototype.stop = stop
Vue.prototype.move = move

3.在打开弹窗和关闭弹窗时使用this调用(打开使用this.stop(),关闭使用this.move())

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐