Vue3中多個彈窗同時出現(xiàn)的解決思路
更新時間：2024年02月29日 09:35:30 作者：前端小王hs
這篇文章主要介紹了Vue3中多個彈窗同時出現(xiàn)的解決思路,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
彈窗或者說對話框是我們在開發(fā)系統(tǒng)或者頁面很常用的元素，所以博主想對出現(xiàn)多個彈窗的情況下的解決思路進行一個整理
有時候我們一個頁面可能存在多個彈窗，當多個彈窗出現(xiàn)的時候可能屏幕就變的很黑
如下圖所示：
取消遮罩層
對此我們可以使用組件原生的屬性modal去取消遮罩層
但問題是
如果存在兩個一樣大小的彈窗
比如我在一個500pxX500px的彈窗中有一個按鈕
是打開另一個大小為500pxX500px的彈窗
但是我又想存在一層遮罩層（按情況此時是兩層遮罩層）以表示目前是打開了彈窗，面對這種情況我們應該怎么解決呢？
打開一層彈窗的同時隱藏另一個彈窗
我們可以給第一個打開的彈窗設置一個display:none屬性
思路如圖所示：
彈窗冒泡如何解決
這個需求的存在是一個比較特殊的情況，如果存在一個頁面，點擊這個頁面的任何地方都會打開一個彈窗，同時這個頁面中有一個按鈕可以打開另一個彈窗
如下圖所示：
這個情況我們就可以在button的綁定函數(shù)中加上.stop，即
<button @click.stop='打開彈窗' />
這樣的話就不會出現(xiàn)兩個彈窗了
總結
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要給大家介紹了關于vue3中如何使用d3.js繪制流程圖的相關資料,D3.js是由javaScript語言編寫繪圖庫,其原理是通過調用一系列內置函數(shù),生成SVG,并在網(wǎng)頁渲染,需要的朋友可以參考下2023-10-10
vue移動端監(jiān)聽滾動條高度的實現(xiàn)方法
今天小編就為大家分享一篇vue移動端監(jiān)聽滾動條高度的實現(xiàn)方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了Vue開發(fā)環(huán)境跨域訪問問題,本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2020-01-01
這篇文章主要為大家詳細介紹了vue實現(xiàn)頁面滾動到底部刷新，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-08-08
import.meta.glob() 如何導入多個目錄下的資源(最新推薦)
import.meta.glob() 其實不僅能接收一個字符串,還可以接收一個字符串數(shù)組,就是匹配多個位置,本文給大家介紹import.meta.glob() 如何導入多個目錄下的資源,感興趣的朋友一起看看吧2023-11-11
Vue3父子組件表單滾動到校驗錯誤的位置實現(xiàn)過程
文章介紹了如何在包含父表單和多個子表單的場景中,通過滾動方法實現(xiàn)提交時的校驗機制,確保數(shù)據(jù)完整性與用戶操作體驗2025-07-07
這篇文章主要介紹了vue Element左側無限級菜單實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-06-06
這篇文章主要介紹了Vue中錯誤圖片的處理的實現(xiàn)代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-11-11
這篇文章主要介紹了Vue?瀏覽器本地存儲,LocalStorage 和 SessionStorage 統(tǒng)稱為 WebStorage，存儲大小一般支持5mb左右，但是不同的瀏覽器也有區(qū)別，具體內容介紹跟隨小編一起看看吧2022-04-04
vue3子組件如何修改父組件傳過來的props數(shù)據(jù)
周所周知vue的props是單向數(shù)據(jù)流,可以從父組件中改變傳往子組件的props,反之則不行,下面這篇文章主要給大家介紹了關于vue3子組件如何修改父組件傳過來的props數(shù)據(jù)的相關資料,需要的朋友可以參考下2022-10-10