时间戳

首页 > 解决方案 > VueJs Nuxt 中的 root () 元素样式

javascript - VueJs Nuxt 中的 root () 元素样式

问题描述

我有这个 vue 组件，当用户单击轮播上的图像时，它会在创建后显示全尺寸图像。当它打开时，用户应该不能滚动页面。目前我实现这一点的方式是直接使用 overflow:hidden; 设置 documentElement 的样式。或溢出：自动；当组件被创建或销毁时。

我的问题是这是否可以接受，或者是否有一种方法可以使用虚拟 DOM。我知道直接干扰 DOM 通常是不好的做法，但我似乎找不到让它工作的方法。我试过使用 this.$root.$el.style 但这似乎也不起作用。

<script>
export default {
  props: ['imageSrc'],
  created() {
    document.documentElement.style.overflow = 'hidden';
  },

  beforeDestroy() {
    document.documentElement.style.overflow = 'auto';
  },
};
</script>

标签： javascriptvue.jsdomvirtual-domroot-element

解决方案

您是否考虑过使用 CSS 代替？您可以创建一个 100vh 和 vw 的 div，绝对定位在所有内容之上（使用位置：固定以防止滚动）。将完整尺寸的 img 元素放置在内部，并将其显示设置为隐藏。将轮播中的图像与更新完整尺寸的 img src 并将 div 的显示从隐藏更改为块的单击方法联系起来。确保将按钮或单击事件添加到完整大小的图像，以便用户可以将显示切换回隐藏。

推荐阅读