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