参考文章地址: juejin.cn/post/684490…
若弹层内没有可滚动内容，可以直接阻止默认滑动事件
可以直接在弹层组件的最外层标签上写上 @touchmove='stopScroll'，直接阻止默认的滚动事件。
stopScroll(e){
e.preventDefault();
}
- 缺点：这样做虽然简单，但是弹层内无法滚动
若弹层内有可滚动内容，防止滑动穿透的方式
在弹窗打开的时候：给body的全局滚动设置 position:fixed 属性，并设置top值；由于设置了fixed属性，那在弹窗的时候body就没有滚动条了。此时如果这么设置会发现body虽然没有了滚动穿透，但是原来的位置丢失了。所以再给body设置fixed属性的时候，要把当前的滚动位置(scrollTop)赋值给css的top属性，那在视觉上就没有任何变化了。
在关闭弹窗的时候：将body的 position:fixed 去掉，并把原来的scrollTop 值赋给现在的scrollTop
给body添加一个动态类名
body.modal-open {
position: fixed;
}
弹窗打开时
var scrollTop = document.scrollingElement.scrollTop; //当前页面的卷去高度
this.scrollTop = scrollTop;
document.body.classList.add("modal-open"); // 给body增加一个类型，让其变为固定定位
document.body.style.top = -scrollTop + "px"; // 给body赋一个top值，让其位置不变
弹框关闭时
document.body.classList.remove("modal-open"); // 删除固定定位
document.scrollingElement.scrollTop = this.scrollTop; // 设置页面设置为原来的卷去高度
