Для того чтобы убрать прокрутку (scroll) у элемента <body> при открытии модальных окон через Vue.js, можно воспользоваться следующим подходом. Мы можем использовать директиву Vue.js для добавления класса к <body>, который будет запрещать прокрутку, когда модальное окно открыто.
1. Сначала создайте директиву Vue.js, которая будет добавлять класс к <body>. Вот пример кода:
Vue.directive('no-scroll', {
bind: function(el, binding) {
if (binding.value) {
document.body.classList.add('no-scroll')
} else {
document.body.classList.remove('no-scroll')
}
}
})
2. Теперь создайте компонент модального окна в вашем приложении Vue.js. В методе, который отвечает за открытие модального окна, вам нужно будет изменить соответствующее свойство и передать это в директиву:
export default {
data() {
return {
isModalOpen: false
}
},
methods: {
openModal() {
this.isModalOpen = true
}
},
watch: {
isModalOpen: function(newValue) {
this.$el.querySelector('.modal').setAttribute('v-no-scroll', newValue)
}
}
}
3. Теперь вам нужно добавить стиль для класса no-scroll в ваш CSS:
.no-scroll {
overflow: hidden;
}
4. Наконец, добавьте вашу директиву в нужное место, например, в элемент вашего модального окна:
<div class="modal" v-no-scroll="isModalOpen"> <!-- Контент модального окна --> </div>
Теперь при открытии модального окна, прокрутка у элемента <body> будет блокирована за счет добавленного класса. Когда модальное окно закрыто, прокрутка будет восстановлена.