在VueJs Nuxt

问题描述

我有这个Vue组件，当用户单击转盘上的图像时，该Vue组件在创建后显示完整尺寸的图像。打开该窗口后，用户将无法滚动页面。 目前，我实现此方法的方法是直接使用溢出：隐藏;样式化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>

解决方法

您是否考虑过使用CSS？您可以创建一个具有100vh和vw的div，该div绝对位于所有内容之上（使用位置：已固定，以防止滚动）。将完整尺寸的img元素放置在内部，并将其显示设置为隐藏。将轮播中的图片绑定到click方法，该方法会更新完整尺寸的img src并将div的显示从隐藏更改为阻止。确保在全尺寸图片上添加按钮或单击事件，以便用户可以将显示切换回隐藏状态。