Javascript 在VueJs Nuxt中设置根（<；html>；）元素的样式

我有一个vue组件，当用户单击旋转木马上的图像时，它会在创建后显示一个完整大小的图像。此选项打开时，用户应无法滚动页面。 目前，我实现这一点的方式是直接使用overflow:hidden设置documentElement的样式；或溢出：自动；创建或销毁组件时

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

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

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

导出默认值{
道具：['imageSrc']，
创建（）{
document.documentElement.style.overflow='hidden'；
},
在…之前{
document.documentElement.style.overflow='auto'；
},
};

您考虑过改用CSS吗？您可以创建一个带有100vh和vw的div，其位置绝对高于所有内容（使用位置：固定以防止滚动）。将全尺寸img元素放置在内部，并将其显示设置为隐藏。将旋转木马中的图像绑定到一个click方法，该方法更新完整大小的img src，并将div的显示从hidden更改为block。确保在全尺寸图像中添加按钮或单击事件，以便用户可以将显示切换回隐藏状态。

您考虑过使用CSS吗？您可以创建一个带有100vh和vw的div，其位置绝对高于所有内容（使用位置：固定以防止滚动）。将全尺寸img元素放置在内部，并将其显示设置为隐藏。将旋转木马中的图像绑定到一个click方法，该方法更新完整大小的img src，并将div的显示从hidden更改为block。确保向全尺寸图像添加按钮或单击事件，以便用户可以将显示切换回隐藏状态