Запретить прокрутку в VueJS - PullRequest
Новая
       23

Запретить прокрутку в VueJS

0 голосов
/ 24 июня 2019

Я пытаюсь предотвратить прокрутку только при открытом компоненте лайтбокса, но, похоже, не могу этого сделать. Я надеюсь не использовать какие-либо внешние библиотеки или плагины для этого.

My App.vue содержит компонент «LightBox», поэтому я предполагаю, что функция предотвращения прокрутки должна также присутствовать в App.vue. Фрагмент приложения: 

<template>
  <div class="SocialAlbumWidget">
    <div v-if="isModalVisible && media[activeIndex]">
      <LightBox
        ...
      />

В настоящее время у меня есть функция "showModal ()" в разделе "методы", поэтому я думал передать ее через другую функцию.

Методы: 

mothods: {
...
showModal () {
  this.isModalVisible = true
},
closeModal () {
  this.isModalVisible = false
}

Я ожидаю, что тело будет иметь прокрутку, когда компонент «Lightbox» закрыт и отключен, когда компонент «Lightbox» открыт. Спасибо! Дайте мне знать, какой другой код будет полезен.

1 Ответ

0 голосов
/ 24 июня 2019

Вы можете использовать наблюдателя, чтобы реагировать на изменения в isModalVisible и отключить функцию прокрутки, используя style="overflow: hidden".

Что-то вроде этого: 

// HTML
<btn @click="dialog = !dialog" >Click Me </btn>

// JS
new Vue({
  el: '#app',
  data () {
    return {
      dialog: false,
    }
  },
  watch: {
    isModalVisible: function() {
      if(this.isModalVisible){
        document.documentElement.style.overflow = 'hidden'
        return
      }

      document.documentElement.style.overflow = 'auto'
    }
  }
})
...