vue 弹出层弹出后禁止底层body滚动
-
新建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
-
main.js中全局引入ModalHelper
import ModalHelper from ‘./utils/modalHelper’
Vue.prototype.$modalHelper = ModalHelper -
vue页面使用
isPayment1(val) {
if (val) {
this.KaTeX parse error: Expected 'EOF', got '}' at position 37: …(); // 打开禁用 }̲ else { th…modalHelper.beforeClose(); // 关闭禁用
}
}, -
为避免用户使用按键返回,需在页面离开时移除禁用即可
beforeRouteLeave (to, from, next) {
this.$modalHelper.beforeClose()
next()
},
原文链接:https://my.oschina.net/lemonfive/blog/2999759