遮罩层滑动穿透问题

参考资料

vue 移动端屏蔽滑动的遮罩层

正文

方案一

.overlayer{
    position:fixed;
    left:0;
    top:0;
    width:100%;
    height:100%;
    z-index:10;
}

在vue里面直接使用@touchmove.prevent 就OK了

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

方案二

但是，如果遮罩层上还有滑动，害，那么上面这种方式会把里面的滑动给禁掉 换一种方式

export const ModalHelper = (function(bodyCls) {
    let scrollTop;
    return {
        // 获取窗口滚动高度
        scrollTopInner () {
            return document.documentElement.scrollTop || document.scrollingElement.scrollTop || document.body.scrollTop || window.pageYOffset;
        },
        afterOpen () {
            scrollTop = this.scrollTopInner();
            document.body.classList.add(bodyCls);
            document.body.style.top = -scrollTop + 'px';
        },
        beforeClose () {
            document.body.classList.remove(bodyCls);
            document.scrollingElement.scrollTop = scrollTop;
        },
        init(b) {
            if (b) {
                this.afterOpen();
            } else {
                this.beforeClose();
            }
        }
    };
})('modal-open');

 openMarkBox(){
      this.openMark = true;
      ModalHelper.init(true);
 },
closeMarkBox(){
  ModalHelper.init(false);
  this.openMark = false;
}