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

Question

[Esm322]

У меня есть 2 модальных окна. Одно зависит от свойства isModalAddVisible, а другое от activeId.
Написал вот такой watch:

watch: {
    checkBlackoutState() {
      if (this.isModalAddVisible || this.activeId) {
        document.body.style.overflow = 'hidden';
      } else {
        document.body.style.overflow = 'auto';
      }
    },
  },

Подскажите, пожалуйста, как теперь его использовать, в хуке каком-то или что с ним сделать?

Comments

[Алексей Ярков]

Что в документации пишут? Вы же читали?

Answer 1

[0xD34F]

.no-overflow {
  overflow: hidden;
}

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

Одно непонятно - зачем отслеживать несколько разных свойств, если наличием скролла может управлять само модальное окно? Открылось - убирает скролл, закрылось - возвращает. Разные окна для разных задача? - сделайте общий компонент, а разницу для конкретных экземпляров определяйте через слоты.

Answer 2

[Анастасия Foxman]

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 являются реактивными свойствами в компоненте. Иначе работать не будет