// 解決遮罩層滾動穿透問題，分別在遮罩層彈出后和關(guān)閉前調(diào)用
let _scrollTop
class ModalHelper {
  // popup 顯示時調(diào)用
  static afterOpen () {
    _scrollTop = document.scrollingElement.scrollTop
    document.body.style.position = 'fixed'
    document.body.style.top = -_scrollTop + 'px'
  }
 
  // popup 關(guān)閉時調(diào)用
  static beforeClose () {
    document.body.style.position = ''
    document.body.style.top = ''
    // 使 scrollTop 恢復(fù)原狀
    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(); // 關(guān)閉禁用
  }
},

4.為避免用戶使用按鍵返回，需在頁面離開時移除禁用即可

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

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

js動態(tài)引入的四種方法
下面小編就為大家?guī)硪黄P(guān)于js動態(tài)引入四種方式的實例代碼，具有很好的參考價值，分享給大家一起跟隨小編過來看看吧
2018-05-05
JavaScript創(chuàng)建對象的七種經(jīng)典方式分享
JavaScript 創(chuàng)建對象的方式有很多，通過 Object 構(gòu)造函數(shù)或?qū)ο笞置媪康姆绞揭部梢詣?chuàng)建單個對象，顯然這兩種方式會產(chǎn)生大量的重復(fù)代碼，并不適合量產(chǎn)。本文介紹了七種非常經(jīng)典的創(chuàng)建對象的方式，希望對大家有所幫助
2022-11-11
基于JavaScript偽隨機正態(tài)分布代碼實例
這篇文章主要介紹了基于JavaScript偽隨機正態(tài)分布代碼實例,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
2019-11-11
用javascript實現(xiàn)自定義標簽
用javascript實現(xiàn)自定義標簽...
2007-05-05
一篇文章弄懂ECMAScript中的操作符
這篇文章主要給大家介紹了如何通過一篇文章弄懂ECMAScript中操作符的相關(guān)資料,其中包括一元操作符、布爾操作符、乘性操作符、加性操作符、關(guān)系操作符、相等操作符、條件操作符、賦值操作符以及逗號操作符,需要的朋友可以參考下
2021-07-07
深入理解JavaScript中實例對象和new命令
典型的面向?qū)ο缶幊陶Z言(比如C++和 Java),都有“類”(class)這個概念。所謂“類”就是對象的模板,對象就是“類”的實例,下面這篇文章主要給大家介紹了關(guān)于JavaScript中實例對象和new命令的相關(guān)資料,需要的朋友可以參考下
2022-12-12
JS實現(xiàn)表單中checkbox對勾選中增加邊框顯示效果
這篇文章主要介紹了JS實現(xiàn)表單中checkbox對勾選中增加邊框顯示效果,可實現(xiàn)點擊后圖片增加邊框及勾選的功能,非常簡潔實用,需要的朋友可以參考下
2015-08-08
手寫Spirit防抖函數(shù)underscore和節(jié)流函數(shù)lodash
這篇文章主要介紹了手寫Spirit防抖函數(shù)underscore和節(jié)流函數(shù)lodash，接下來將會帶你們了解下這兩者的區(qū)別,以及我們該如何手寫實現(xiàn)這兩個函數(shù)
2022-03-03
JS交互點擊WKWebView中的圖片實現(xiàn)預(yù)覽效果
這篇文章主要介紹了JS交互點擊WKWebView中的圖片實現(xiàn)預(yù)覽效果,需要的朋友可以參考下
2018-01-01
JavaScript聲明變量名的語法規(guī)則
這篇文章主要給大家簡單介紹了JavaScript聲明變量名的語法規(guī)則，非常有助于大家學(xué)習(xí)javascript，有需要的小伙伴可以參考下。
2015-07-07