elementUI同一頁面展示多個Dialog的實現(xiàn)
更新時間：2020年11月19日 10:40:39 作者：rirmk
這篇文章主要介紹了elementUI同一頁面展示多個Dialog的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
要實現(xiàn)的效果如下：
首先官方文檔是這樣描述的：
但是我寫了個小demo發(fā)現(xiàn)并不能直接平級放置即可，一樣會存在先后順序不同造成的覆蓋以及遮罩層導致不能點擊被遮蓋的dialog。
原因如下：因為dialog先后順序不同z-index設置的層級不同，所以必定會覆蓋遮擋
那么我們要實現(xiàn)一個這樣的效果不僅僅平級放置即可，就要用到里面的一個屬性：modal
下面貼上代碼：
總的思路就是：dialog先后順序重疊問題，使用便宜去讓它們錯開；然后就是遮罩層導致不能點擊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插件的方法，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下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
這篇文章主要為大家詳細介紹了Vue.js render方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-04-04
這篇文章主要介紹了解決Element ui導航欄選中背景色刷新消失的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
基于vue循環(huán)列表時點擊跳轉(zhuǎn)頁面的方法
今天小編就為大家分享一篇基于vue循環(huán)列表時點擊跳轉(zhuǎn)頁面的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
vue中的attribute和property的具體使用及區(qū)別
本文主要介紹了vue中的attribute和property的具體使用及區(qū)別，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09