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