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>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。