场景
先打开一个el-dialog再打开一个el-drawer,发现el-drawer展示在el-dialog下方,被遮挡住了
原因:
el-dialog 和 el-drawer 组件都会在其内部使用一个遮罩层(overlay)来覆盖其他内容,以达到模态对话框或抽屉效果。默认情况下,Element UI 为这些遮罩层设置了样式,其中包括了 z-index 值,用以确保遮罩层能够覆盖在其他内容之上。
el-dialog的遮罩层的z-index默认是2000,每次打开后关闭都会自增一次,第一次打开后z-index就变成了2001,el-drawer的遮罩层的z-index默认是2000,这时候el-dialog的层级比el-drawer高,所以展示在上方
解决
设置el-dialog的z-index固定为2000,这样每次打开就不会自增了
<el-dialog :z-index="2000"></el-dialog>