在扯廢話浪費大家的時間之前，先上個代碼好了，使用vue實現起來很簡單……
<div class="overlayer" @touchmove.prevent >
</div>
對，就是這么簡單，加上@touchmove.prevent就可以屏蔽滑動頁面了，然后再和普通的遮罩層一樣，加點樣式
/*遮罩層*/
.overlayer{
position:fixed;
left:0;
top:0;
width:100%;
height:100%;
z-index:10;
}
如此，便可以了_(:з)∠)_，vue真是好用啊……
以下是廢話和原理
開發移動端頁面的時候有一個很比較常見的需求，在出現彈窗時，禁止滑動彈窗后面的主體頁面；
實際上大部分彈窗插件(或者組件)都帶了這樣的功能，所以我自己也從來沒研究過這個；
這次的項目突然出現了一個需要自己寫彈窗的場景……我瞬間就懵逼了QwQ
雖然毫無思路，但是代碼還是要寫的，效果還是要實現的，問題還是要解決的，而程序員解決問題的第一步，自然就是先去百度一下；
一般來講吧，普通問題都可以直接百度解決，百度不到的再考慮問人，屏蔽滑動的遮罩層這樣常見的需求，自然是有一大堆的解決方案，不過……太多了根本沒法選啊(╯‵□′)╯︵┻━┻
隨便試了一套方案，未果，遂放棄了繼續嘗試的打算……還是去翻別人的源碼吧。
首先想到了mint ui中的popup組件;
認真閱讀了一下，發現這個遮罩層也沒做什么事情，就是屏蔽了一下touchmove事件，拿到這個思路再回去自己查了下資料，移動端的屏幕滑動，實際上就是touchmove事件的默認行為，在冒泡過程中任何一層阻止這個默認行為，都可以阻止屏幕滑動，弄懂原理，實現起來就簡單了，傳統做法是在body上添加一個touchmove事件處理器，在顯示遮罩層的時候使用.preventDefault()方法阻止默認行為，而vue就更簡單了，把彈窗之類的都寫在遮罩層元素內部，然后直接在遮罩層上加上一個取消默認行為的事件處理器，就可以咯~
注意！
如果彈窗不在遮罩層內部，那么冒泡就不會經過遮罩層，也就無法屏蔽滑動了0.0
<div class="overlayer" @touchmove.prevent >
</div>
<div class="popup">
如果在這個div中滑動，觸發的事件是不會經過overlayer的，也就無法屏蔽滑動了
</div>
如果實在不能把彈窗放到遮罩層內，那么給彈窗加一個單獨的 .prevent 修飾符也可以，下面這兩種方式都是有效的：
<!--plan A-->
<div class="overlayer" @touchmove.prevent >
<div class="popup">
如果在這個div中滑動，觸發的事件會經過overlayer，可以屏蔽滑動
</div>
</div>
<!--plan B-->
<div class="overlayer" @touchmove.prevent >
</div>
<div class="popup" @touchmove.prevent>
如果在這個div中滑動，觸發的事件也會被禁用默認行為, 也可以屏蔽滑動
</div>
PC端方案
這種屏蔽方式只是屏蔽了滑動，對於PC端的鼠標滾輪是無效的，但屏蔽鼠標滾輪也很簡單，把 touchmove 事件處理器改成 scroll 事件的處理器就好了~就像這樣：
<div class="overlayer" @scroll.prevent >
</div>