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