背景:?
????????微前端集成后主子應(yīng)用的dialog 層級(jí)沖突導(dǎo)致主應(yīng)用的彈窗被覆蓋, 主子應(yīng)用的彈窗都是append 到body 下的,? z-index 自動(dòng)生成??
嘗試方案:?
? ? ? ? 1. 根據(jù)官方Api 給彈窗添加自定義class, 并通過(guò)設(shè)置自定義 class 樣式來(lái)控制;?
? ? ? ? ? ? ? ? ==> 無(wú)效, 因?yàn)樯傻腸lass 是在子級(jí), 內(nèi)部的一層, 外層的 el-dialog_wrapper 沒(méi)有添加自定義類名;
解決辦法:
? ? ? ? 1. 沿著增加自定義類名的思路, 使用最原始的方法操作DOM 給 el-dialog_wrapper ? 添加自定義類名
<el-dialog
title="預(yù)覽"
ref="jgFileViewerDialog"
append-to-body
custom-class="jg-file-viewer"
>methods: {
showDialog() {
this.visible = true
this.$nextTick(() => {
document.querySelectorAll('.jg-file-viewer')[0].parentNode.classList.add('jg-file-viewer')
})
},
},<style>
.jg-file-viewer {
z-index: 9990 !important;
}
</style>效果:
彈窗顯示出來(lái)再最上層, 層級(jí)被覆蓋為 9990;
?
?文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-512831.html
總結(jié):
方法土了點(diǎn), 實(shí)屬無(wú)奈之舉, 大家在用的時(shí)候類名可以自己定義一下, 我這里直接寫(xiě)成一樣的了文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-512831.html
到了這里，關(guān)于element-ui / element-plus dialog 自定義層級(jí)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
