移动端vue项目解决遮罩层滚动穿透问题

网上有好几种方法，对于我来说，常用的就两种，

1、当弹框明显小于页面的时候，确保不需要滑动查看内容时，可在最外层的遮盖层添加  ：@touchmove.prevent

 

2、弹框的内容明显长过屏幕，需要弹框内容滑动，主页页面不滑动

（1）在html文件添加如下代码

（2）在全局的CSS中添加

body.dialog-open {
  position: fixed;
  width: 100%;
}

（3）在vue组件中，对话框弹出和关闭的地方调用上面那段JS代码

对话框弹出后调用：ModalHelper.afterOpen();

对话框关闭前调用：ModalHelper.beforeClose();

此方法的原理是：弹出弹框时，使背景主页内容作为固定定位，这样页面的滑动对其就没有任何影响，关闭弹框使，移除这个固定定位的类名，回复正常