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è)頁面的任何地方都會打開一個(gè)彈窗，同時(shí)這個(gè)頁面中有一個(gè)按鈕可以打開另一個(gè)彈窗
如下圖所示：
這個(gè)情況我們就可以在button的綁定函數(shù)中加上.stop，即
<button @click.stop='打開彈窗' />
這樣的話就不會出現(xiàn)兩個(gè)彈窗了
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue實(shí)現(xiàn)書本翻頁動畫效果實(shí)例詳解
這篇文章主要介紹了vue簡單實(shí)現(xiàn)書本翻頁效果,需要的朋友可以參考下2022-04-04
vue如何通過props方式在子組件中獲取相應(yīng)的對象
這篇文章主要介紹了vue如何通過props方式在子組件中獲取相應(yīng)的對象，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue3 DOM是Vue.js框架的一部分，用于處理與瀏覽器DOM相關(guān)的操作，它提供了一組API和工具，使開發(fā)者能夠輕松地操作和管理DOM元素，本文給大家介紹了Vue3獲取元素DOM的兩種方法：ref模板引用和傳統(tǒng)方法，并有詳細(xì)的代碼示例,需要的朋友可以參考下2024-04-04
這篇文章主要介紹了詳解vue 項(xiàng)目白屏解決方案，詳細(xì)的介紹了白屏的解決方案，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2018-10-10
這篇文章主要介紹了Vue如何比較字符串變化并高亮變化的部分問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-12-12
這篇文章主要介紹了Vue3.0中如何監(jiān)聽props方法，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue 實(shí)現(xiàn)定時(shí)刷新與自動更新(示例詳解)
在現(xiàn)代 Web 開發(fā)中,定時(shí)刷新頁面或定時(shí)更新數(shù)據(jù)是一種常見的需求,尤其是在需要與服務(wù)器進(jìn)行定時(shí)通信或者展示實(shí)時(shí)數(shù)據(jù)的場景下,Vue.js 提供了簡單而有效的方法來實(shí)現(xiàn)定時(shí)刷新和自動更新,本文將介紹幾種常見的定時(shí)刷新方式、適用場景、優(yōu)缺點(diǎn)以及性能考慮2024-11-11
過濾器vue.filters的使用方法實(shí)現(xiàn)
這篇文章主要介紹了過濾器vue.filters的使用方法實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
vue項(xiàng)目打包是我們?nèi)粘＝?jīng)常遇到的,下面這篇文章主要給大家介紹了關(guān)于Vue打包后不同版本詳細(xì)解析的相關(guān)資料,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2022-12-12
Vue組件間的通信pubsub-js實(shí)現(xiàn)步驟解析
這篇文章主要介紹了Vue組件間的通信pubsub-js實(shí)現(xiàn)原理解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-03-03