vue實(shí)現(xiàn)一個移動端屏蔽滑動的遮罩層實(shí)例
在扯廢話浪費(fèi)大家的時間之前，先上個代碼好了，使用vue實(shí)現(xiàn)起來很簡單……
<div class="overlayer" @touchmove.prevent > </div>
對，就是這么簡單，加上@touchmove.prevent就可以屏蔽滑動頁面了，然后再和普通的遮罩層一樣，加點(diǎn)樣式
/*遮罩層*/
.overlayer{
position:fixed;
left:0;
top:0;
width:100%;
height:100%;
z-index:10;
}
如此，便可以了_(:з)∠)_，vue真是好用啊……
以下是廢話和原理
開發(fā)移動端頁面的時候有一個很比較常見的需求，在出現(xiàn)彈窗時，禁止滑動彈窗后面的主體頁面；
實(shí)際上大部分彈窗插件(或者組件)都帶了這樣的功能，所以我自己也從來沒研究過這個；
這次的項(xiàng)目突然出現(xiàn)了一個需要自己寫彈窗的場景……我瞬間就懵逼了QwQ
雖然毫無思路，但是代碼還是要寫的，效果還是要實(shí)現(xiàn)的，問題還是要解決的，而程序員解決問題的第一步，自然就是先去百度一下；
一般來講吧，普通問題都可以直接百度解決，百度不到的再考慮問人，屏蔽滑動的遮罩層這樣常見的需求，自然是有一大堆的解決方案，不過……太多了根本沒法選啊(╯‵□′)╯︵┻━┻
隨便試了一套方案，未果，遂放棄了繼續(xù)嘗試的打算……還是去翻別人的源碼吧。
首先想到了mint ui中的popup組件;
認(rèn)真閱讀了一下，發(fā)現(xiàn)這個遮罩層也沒做什么事情，就是屏蔽了一下touchmove事件，拿到這個思路再回去自己查了下資料，移動端的屏幕滑動，實(shí)際上就是touchmove事件的默認(rèn)行為，在冒泡過程中任何一層阻止這個默認(rèn)行為，都可以阻止屏幕滑動，弄懂原理，實(shí)現(xiàn)起來就簡單了，傳統(tǒng)做法是在body上添加一個touchmove事件處理器，在顯示遮罩層的時候使用.preventDefault()方法阻止默認(rèn)行為，而vue就更簡單了，把彈窗之類的都寫在遮罩層元素內(nèi)部，然后直接在遮罩層上加上一個取消默認(rèn)行為的事件處理器，就可以咯~
注意！
如果彈窗不在遮罩層內(nèi)部，那么冒泡就不會經(jīng)過遮罩層，也就無法屏蔽滑動了0.0
<div class="overlayer" @touchmove.prevent >
</div>
<div class="popup">
如果在這個div中滑動，觸發(fā)的事件是不會經(jīng)過overlayer的，也就無法屏蔽滑動了
</div>
如果實(shí)在不能把彈窗放到遮罩層內(nèi)，那么給彈窗加一個單獨(dú)的 .prevent 修飾符也可以，下面這兩種方式都是有效的：
<!--plan A-->
<div class="overlayer" @touchmove.prevent >
<div class="popup">
如果在這個div中滑動，觸發(fā)的事件會經(jīng)過overlayer，可以屏蔽滑動
</div>
</div>
<!--plan B-->
<div class="overlayer" @touchmove.prevent >
</div>
<div class="popup" @touchmove.prevent>
如果在這個div中滑動，觸發(fā)的事件也會被禁用默認(rèn)行為, 也可以屏蔽滑動
</div>
PC端方案
這種屏蔽方式只是屏蔽了滑動，對于PC端的鼠標(biāo)滾輪是無效的，但屏蔽鼠標(biāo)滾輪也很簡單，把 touchmove 事件處理器改成 scroll 事件的處理器就好了~就像這樣：
<div class="overlayer" @scroll.prevent > </div>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue3+Vue Router實(shí)現(xiàn)動態(tài)路由導(dǎo)航的示例代碼
隨著單頁面應(yīng)用程序(SPA)的日益流行,前端開發(fā)逐漸向復(fù)雜且交互性強(qiáng)的方向發(fā)展,在這個過程中,Vue.js及其生態(tài)圈的工具（如Vue Router）為我們提供了強(qiáng)大的支持,本文將介紹如何在Vue 3中使用Vue Router實(shí)現(xiàn)動態(tài)路由導(dǎo)航,需要的朋友可以參考下2024-08-08
這篇文章主要給大家介紹了關(guān)于vue3使用canvas的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用vue3具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-04-04
這篇文章主要介紹了vue中如何禁止input框和textarea編輯，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
在本文中，我們學(xué)習(xí)了如何使用 Intersection Observer API 和?defineAsyncComponent?函數(shù)在 Vue 組件可見時對其進(jìn)行懶加載，本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友一起看看吧2023-09-09
在寫業(yè)務(wù)的時候很常見的一個場景就是需要在不同的頁面調(diào)用同一個表單，常用的交互就是把表單以彈窗的形式展示，本文主要介紹了Vue實(shí)現(xiàn)Dialog封裝，感興趣的可以了解一下2021-07-07
這篇文章主要介紹了解決element-ui el-checkbox的一些坑，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
vue3中使用vuedraggable實(shí)現(xiàn)拖拽el-tree數(shù)據(jù)分組功能
這篇文章主要介紹了vue3中使用vuedraggable實(shí)現(xiàn)拖拽el-tree數(shù)據(jù)分組功能,可以實(shí)現(xiàn)單個拖拽、雙擊添加、按住ctrl鍵實(shí)現(xiàn)多個添加,或者按住shift鍵實(shí)現(xiàn)范圍添加,添加到框中的數(shù)據(jù),還能拖拽排序,需要的朋友可以參考下2024-02-02
vue forEach循環(huán)數(shù)組拿到自己想要的數(shù)據(jù)方法
今天小編就為大家分享一篇vue forEach循環(huán)數(shù)組拿到自己想要的數(shù)據(jù)方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
vue項(xiàng)目中做編輯功能傳遞數(shù)據(jù)時遇到問題的解決方法
這篇文章主要介紹了vue項(xiàng)目中做編輯功能傳遞數(shù)據(jù)時遇到問題的解決方法，vue父組件向子組件傳遞數(shù)據(jù)的問題，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
Ant Design的可編輯Tree的實(shí)現(xiàn)操作
這篇文章主要介紹了Ant Design的可編輯Tree的實(shí)現(xiàn)操作，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10