vue项目弹出层后禁止body底层的滚动事件

2019独角兽企业重金招聘Python工程师标准>>>

1.新建utils/modalHelper.js文件

// 解决遮罩层滚动穿透问题，分别在遮罩层弹出后和关闭前调用
let _scrollTop
class ModalHelper {
  // popup 显示时调用
  static afterOpen () {
    _scrollTop = document.scrollingElement.scrollTop
    document.body.style.position = 'fixed'
    document.body.style.top = -_scrollTop + 'px'
  }

  // popup 关闭时调用
  static beforeClose () {
    document.body.style.position = ''
    document.body.style.top = ''
    // 使 scrollTop 恢复原状
    document.scrollingElement.scrollTop = _scrollTop
  }
}

export default ModalHelper

2.main.js中全局引入ModalHelper

import ModalHelper from './utils/modalHelper'
Vue.prototype.$modalHelper = ModalHelper

3.vue页面使用

isPayment1(val) {
  if (val) {
    this.$modalHelper.afterOpen(); // 打开禁用
  } else {
    this.$modalHelper.beforeClose(); // 关闭禁用
  }
},

4.为避免用户使用按键返回，需在页面离开时移除禁用即可

beforeRouteLeave (to, from, next) {
  this.$modalHelper.beforeClose()
  next()
},

 

转载于:https://my.oschina.net/lemonfive/blog/2999759