elementUI同一頁面展示多個Dialog的實現(xiàn)
更新時間：2020年11月19日 10:40:39 作者：rirmk
這篇文章主要介紹了elementUI同一頁面展示多個Dialog的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
要實現(xiàn)的效果如下：
首先官方文檔是這樣描述的：
但是我寫了個小demo發(fā)現(xiàn)并不能直接平級放置即可，一樣會存在先后順序不同造成的覆蓋以及遮罩層導(dǎo)致不能點擊被遮蓋的dialog。
原因如下：因為dialog先后順序不同z-index設(shè)置的層級不同，所以必定會覆蓋遮擋
那么我們要實現(xiàn)一個這樣的效果不僅僅平級放置即可，就要用到里面的一個屬性：modal
下面貼上代碼：
總的思路就是：dialog先后順序重疊問題，使用便宜去讓它們錯開；然后就是遮罩層導(dǎo)致不能點擊z-index層級低的彈框，就要用到modal去關(guān)閉z-index層級高的遮罩層。（還可以額外使用close-on-click-modal來取消通過點擊 modal 關(guān)閉 Dialog）
到此這篇關(guān)于elementUI同一頁面展示多個Dialog的實現(xiàn)的文章就介紹到這了,更多相關(guān)elementUI多Dialog內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue中使用vue-touch插件的方法，本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-07-07
如何解決element-ui中多個table在tab切換時出現(xiàn)寬度縮小問題
這篇文章主要介紹了如何解決element-ui中多個table在tab切換時出現(xiàn)寬度縮小問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
在Vue3項目中需要頻繁使用某一個方法,配置到全局感覺會方便很多,這篇文章主要給大家介紹了關(guān)于Vue3使用全局函數(shù)或變量的2種常用方式,需要的朋友可以參考下2023-09-09
vue中提示$index is not defined錯誤的解決方式
這篇文章主要介紹了vue中提示$index is not defined錯誤的解決方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
vue使用element-ui tabs切換echarts解決寬度100%方式
這篇文章主要介紹了vue使用element-ui tabs切換echarts解決寬度100%方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
Vue通過WebSocket建立長連接的實現(xiàn)代碼
這篇文章主要介紹了Vue通過WebSocket建立長連接的實現(xiàn)代碼，文中給出了問題及解決方案,需要的朋友可以參考下2019-11-11
這篇文章主要為大家詳細(xì)介紹了Vue.js render方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-04-04
解決Element ui導(dǎo)航欄選中背景色刷新消失的問題
這篇文章主要介紹了解決Element ui導(dǎo)航欄選中背景色刷新消失的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
基于vue循環(huán)列表時點擊跳轉(zhuǎn)頁面的方法
今天小編就為大家分享一篇基于vue循環(huán)列表時點擊跳轉(zhuǎn)頁面的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
vue中的attribute和property的具體使用及區(qū)別
本文主要介紹了vue中的attribute和property的具體使用及區(qū)別，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09