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)致不能點(diǎn)擊被遮蓋的dialog。
原因如下：因為dialog先后順序不同z-index設(shè)置的層級不同，所以必定會覆蓋遮擋
那么我們要實現(xiàn)一個這樣的效果不僅僅平級放置即可，就要用到里面的一個屬性：modal
下面貼上代碼：
總的思路就是：dialog先后順序重疊問題，使用便宜去讓它們錯開；然后就是遮罩層導(dǎo)致不能點(diǎn)擊z-index層級低的彈框，就要用到modal去關(guān)閉z-index層級高的遮罩層。（還可以額外使用close-on-click-modal來取消通過點(diǎn)擊 modal 關(guān)閉 Dialog）
到此這篇關(guān)于elementUI同一頁面展示多個Dialog的實現(xiàn)的文章就介紹到這了,更多相關(guān)elementUI多Dialog內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vuex處理用戶Token過期及優(yōu)化設(shè)置封裝本地存儲操作模塊
這篇文章主要為大家介紹了Vuex處理用戶Token優(yōu)化設(shè)置封裝本地存儲操作模塊及Token?過期問題詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
這篇文章主要為大家介紹了tdesign vue初始化組件源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
這篇文章主要介紹了vue{{}}拼接字符串和換行符方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-12-12
vue頁面渲染數(shù)組中數(shù)據(jù)文案后添加逗號最后不加
這篇文章主要為大家介紹了vue頁面渲染數(shù)組中數(shù)據(jù)文案后添加逗號最后不加逗號示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
Nvue是一個基于weex改進(jìn)的原生渲染引擎,它在某些方面要比vue更高性能,在app上使用更加流暢,這篇文章主要介紹了nvue頁面用法uniapp,需要的朋友可以參考下2023-12-12
這篇文章主要為大家詳細(xì)介紹了vue.js中v-for使用及索引獲取,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-11-11
vue-cli5.0?webpack?采用?copy-webpack-plugin?打包復(fù)制文件的方法
今天就好好說說vue-cli5.0種使用copy-webpack-plugin插件該如何配置的問題。這里我們安裝的 copy-webpack-plugin 的版本是 ^11.0.0，感興趣的朋友一起看看吧2022-06-06
這篇文章主要介紹了vue?+?qiankun?項目搭建,首先是通過cli3構(gòu)建vue2項目，通過qiankun改造主應(yīng)用，本文結(jié)合實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-03-03
vue開發(fā)移動端使用better-scroll時click事件失效的解決方案
這篇文章主要介紹了vue開發(fā)移動端使用better-scroll時click事件失效的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2021-07-07
本篇文章主要介紹了vue組件中使用iframe元素的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-12