背景:
微前端集成后主子应用的dialog 层级冲突导致主应用的弹窗被覆盖, 主子应用的弹窗都是append 到body 下的, z-index 自动生成
尝试方案:
1. 根据官方Api 给弹窗添加自定义class, 并通过设置自定义 class 样式来控制;
==> 无效, 因为生成的class 是在子级, 内部的一层, 外层的 el-dialog_wrapper 没有添加自定义类名;
解决办法:
1. 沿着增加自定义类名的思路, 使用最原始的方法操作DOM 给 el-dialog_wrapper 添加自定义类名
<el-dialog
title="预览"
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>效果:
弹窗显示出来再最上层, 层级被覆盖为 9990;
文章来源：https://www.toymoban.com/news/detail-512831.html
总结:
方法土了点, 实属无奈之举, 大家在用的时候类名可以自己定义一下, 我这里直接写成一样的了文章来源地址https://www.toymoban.com/news/detail-512831.html
到了这里，关于element-ui / element-plus dialog 自定义层级的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
