element-ui 弹窗里面嵌套弹窗,解决第二个弹窗被遮罩层掩盖无法显示的问题

当我们在 element-ui 中使用弹窗嵌套弹窗时,会出现第二个弹窗打开时被一个遮罩层挡着,就像下面这样:

element-ui 弹窗里面嵌套弹窗,解决第二个弹窗被遮罩层掩盖无法显示的问题_第1张图片

下面提供两种解决方案 :

一、第一种方案

我们查询element-ui 官网可以发现 el-dialog 有这样几个属性:

element-ui 弹窗里面嵌套弹窗,解决第二个弹窗被遮罩层掩盖无法显示的问题_第2张图片

 具体使用就是在第一个弹窗中设置 :modal-append-to-body="false"  和 :append-to-body="true",在第二个弹窗中设置 :append-to-body="true"

element-ui 弹窗里面嵌套弹窗,解决第二个弹窗被遮罩层掩盖无法显示的问题_第3张图片

这样就能实现我们想要的效果了。

element-ui 弹窗里面嵌套弹窗,解决第二个弹窗被遮罩层掩盖无法显示的问题_第4张图片

二、 第二种方案

我们可以把两个弹窗平级写在主页面中,并同时给2个弹窗设置 :append-to-body="true"

element-ui 弹窗里面嵌套弹窗,解决第二个弹窗被遮罩层掩盖无法显示的问题_第5张图片

你可能感兴趣的:(vue.js,前端,javascript,element-ui)