@Esm322

Как убрать scroll у body при открытии модальных окон через vue watch?

У меня есть 2 модальных окна. Одно зависит от свойства isModalAddVisible, а другое от activeId.
Написал вот такой watch:
watch: {
    checkBlackoutState() {
      if (this.isModalAddVisible || this.activeId) {
        document.body.style.overflow = 'hidden';
      } else {
        document.body.style.overflow = 'auto';
      }
    },
  },

Подскажите, пожалуйста, как теперь его использовать, в хуке каком-то или что с ним сделать?
  • Вопрос задан
  • 120 просмотров
Решения вопроса 1
0xD34F
@0xD34F Куратор тега Vue.js
.no-overflow {
  overflow: hidden;
}

mounted() {
  this.$watch(
    () => this.isModalAddVisible || this.activeId,
    val => document.body.classList.toggle('no-overflow', val),
    { immediate: true }
  );
},

Одно непонятно - зачем отслеживать несколько разных свойств, если наличием скролла может управлять само модальное окно? Открылось - убирает скролл, закрылось - возвращает. Разные окна для разных задача? - сделайте общий компонент, а разницу для конкретных экземпляров определяйте через слоты.
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
Anastasia2306
@Anastasia2306
PHP-разработчик.
export default {
  data() {
    return {
      isModalAddVisible: false,
      activeId: null,
    };
  },
  watch: {
    isModalAddVisible(newValue) {
      if (newValue || this.activeId) {
        document.body.style.overflow = 'hidden';
      } else {
        document.body.style.overflow = 'auto';
      }
    },
    activeId(newValue) {
      if (this.isModalAddVisible || newValue) {
        document.body.style.overflow = 'hidden';
      } else {
        document.body.style.overflow = 'auto';
      }
    },
  },
};


Только не забудь удостовериться, что isModalAddVisible и activeId являются реактивными свойствами в компоненте. Иначе работать не будет
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы