vue頁面有彈層,禁止頁面滾動

摻乎君發表於2020-11-10

vue頁面有彈層,禁止頁面滾動

data() {
  return {
    popupVisible: false
},
watch: { // 監聽data中彈層狀態
  popupVisible(val) {
    if (val) {
      document.body.style.overflow = 'hidden'
      document.addEventListener('touchmove', function (e) {
        e.preventDefault()
      }, {
        passive: false
      }) // 禁止頁面滑動
    } else {
      document.body.style.overflow = '' // 出現滾動條
      document.removeEventListener('touchmove', function (e) {
        e.preventDefault()
      }, {
        passive: false
      })
    }
  }
},

相關文章