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