vue--模态框背景不动解决方案

1、如果弹框内容不需要滚动 直接在灰色背景元素上绑定@touchmove.prevent 事件即可

2、内容需要滚动的情况下实现原理：

　　给一个固定定位的样式类，当模态框出现时，动态添加样式类给body 标签，并且获取当前页面滚动高度赋值给

this.mockScrollTop 设置body固定定位的高度。当模态框关闭时body标签动态移出类名，并把存在data里的 this.mockScrollTop 值赋值给当前滚动高度

第一步定义需要用到的变量，并且赋予默认值

data(){
  return{
     mockScrollTop: null, // 距离顶端的值
     className:'modalOpen',  
     hideShow: false, // 模态框默认不显示  
  }  
}

第二步methods定义模态框点击事件

 // 模态框背景禁止滑动
        hideBox() {
            this.hideShow = !this.hideShow;
            if (this.hideShow) {
                this.mockScrollTop = document.scrollingElement.scrollTop;
                document.body.classList.add(this.className);
                document.body.style.top = `-${this.mockScrollTop}px`;
            } else {
                document.body.classList.remove(this.className);
                document.scrollingElement.scrollTop = this.mockScrollTop;
            }
        },

第三步methods定义模态框出现css 样式

/*弹层*/
body.modalOpen {
    -webkit-overflow-scrolling:touch;
    position: fixed;
    width: 100%;
}

以上就可以实现模态框出现时背景不动。

需要注意的是，如果在项目里使用

document.body.classList.add/remove 不生效的情况，直接给body动态更改style 具体实现方式如下：

 hideBox() {
            let bodyEl = document.body;
            this.$nextTick(()=>{
                this.isdialogShow = !this.isdialogShow;
                if (this.isdialogShow) {
                    this.mockScrollTop = document.scrollingElement.scrollTop;
                    bodyEl.style.position='fixed';
                    bodyEl.style.top = `-${this.mockScrollTop}px`;
                } else {
                    bodyEl.style.position = 'static'
                    bodyEl.style.top = ''
                    document.scrollingElement.scrollTop = this.mockScrollTop;
                }
            })
        },

这样就可以有效解决了，亲测有效。