vue實現一個移動端屏蔽滑動的遮罩層執行個體，vue遮罩

vue實現一個移動端屏蔽滑動的遮罩層執行個體，vue遮罩

在扯廢話浪費大家的時間之前，先上個代碼好了，使用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>

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援幫客之家。