如何解决在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的显示从隐藏更改为阻止。确保在全尺寸图片上添加按钮或单击事件,以便用户可以将显示切换回隐藏状态。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。