vue 弹出层弹出后禁止底层body滚动

vue 弹出层弹出后禁止底层body滚动

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.KaTeX parse error: Expected 'EOF', got '}' at position 37: …(); // 打开禁用 }̲ else { th…modalHelper.beforeClose(); // 关闭禁用
   }
   },

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

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

原文链接：https://my.oschina.net/lemonfive/blog/2999759