如何在Vue中实现既禁止屏幕滚动又禁止屏幕滑动？

本文共计1364个文字，预计阅读时间需要6分钟。

今天写了一个Vue弹层组件，用于全屏查看图片。大致效果如下：背景是透明色的，但弹出这个组件时手指滑动、鼠标滚轮滚动，底部页面会动态。作为自己开发的“

今天写了一个Vue弹层组件，用来全屏查看图片的，大概是下面这么一个效果：

其中背景是透明色的，但是弹出这个组件时手指滑动、鼠标滚轮滑动，底部页面是会动。

作为自己开发的一个常用的组件，这种bug当然是要解决的。

于是学艺不精的我在网上找了蛮久的，看了不少博客，看了不少观点和方法。终于找到了一个最简单、最实在的方法，

代码如下：

<div class="magnify" v-show="isShow" @click.self="hide" @touchmove.prevent @mousewheel.prevent> ... </div>

首先，这个div就是整个遮罩组件的根组件，核心就是div上的事件绑定。

@touchmove 是触摸移动事件

@mousewheel 是鼠标滚轮事件

而加了prevent事件后缀，相信大家都知道是阻止默认事件。

当组件在屏幕最上方显示时，触摸移动事件和鼠标滚轮都被阻止了，所以页面不会再滚动。