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