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%;
}

以上就可以實現模態框出現時背景不動。