Стилизация корневого элемента (<html>) в VueJs Nuxt
У меня есть этот компонент vue, который отображает полноразмерное изображение после создания, когда пользователь щелкает изображение на карусели. Когда он открыт, у пользователя не должно быть возможности прокручивать страницу. В настоящее время я реализовал это путем прямой стилизации элемента documentElement с помощью overflow: hidden; или переполнение: авто; когда компонент создается или уничтожается.
Мои вопросы: приемлемо ли это или есть ли способ, например, использовать виртуальный DOM. Я знаю, что прямое вмешательство в DOM обычно является плохой практикой, но я не могу найти способ заставить его работать. Я пробовал использовать это.$ Root.$ El.style, но это тоже не работает.
<script>
export default {
props: ['imageSrc'],
created() {
document.documentElement.style.overflow = 'hidden';
},
beforeDestroy() {
document.documentElement.style.overflow = 'auto';
},
};
</script>
1 ответ
Вы рассматривали возможность использования вместо этого CSS? Вы можете создать div с 100vh и vw, расположенный абсолютно над всем содержимым (используется позиция: фиксированная, чтобы предотвратить прокрутку). Разместите внутри полноразмерный элемент img и сделайте его скрытым. Свяжите изображения в своей карусели с методом щелчка, который обновляет полный размер img src и изменяет отображение div со скрытого на блочное. Убедитесь, что вы добавили кнопку или событие щелчка к полноразмерному изображению, чтобы пользователь мог снова переключить отображение на скрытое.