如何将Vue遮罩层阻止默认滚动事件操作改写成长尾？

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

在编写移动端页面时，弹出遮挡层后，我们通常可以滚动页面。在Vue中，可以通过提供`@touchmove.prevent`方法来完美解决这个问题。

例如，使用以下代码：

如果不使用Vue的指令，可以给`body`添加样式来阻止滚动：

cssbody { overflow: hidden;}

在写移动端页面的时候,弹出遮罩层后，我们仍然可以滚动页面。

vue中提供 @touchmove.prevent 方法可以完美解决这个问题

<div class="dialog" @touchmove.prevent ></div>

如果不是使用Vue的话，可以给body添加overflow:hidden属性解决

补充知识：vue项目中禁止页面滚动 / 滚动事件穿透 (弹出蒙版时，弹出层下面还可以滚动)

vue项目中弹出层时，蒙版下还可以滚动页面。