vue使用多级弹窗(Dialog)出现蒙版遮罩问题及解决
场景
结果列表按钮对应了一个结果列表弹窗,页面中每条结果后又有下载和查看结果按钮,查看结果按钮很明显由对应一个弹窗页面。
因此这属于多级弹窗(使用的是Dialog)
当出现第一级弹窗时,可以正常关闭开启;
当出现第二级弹窗后,第二级弹窗打开后就无法关闭,很明显是出现了蒙版遮罩问题。
效果演示
(图二完全置灰,无法点击任何按钮)


解决方案
出现蒙版遮罩和层级肯定是有关,但是尝试设置z-index没有任何效果。
查看https://element.eleme.io/#/zh-CN/component/dialog官网Dialog对话框参数中有:

这两个属性是关于遮罩层问题的
添加 :append-to-body="true" 后,就解决了遮罩层的问题,可以参照下属性说明来理解下。
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
vue实现录音功能js-audio-recorder带波浪图效果的示例
这篇文章主要介绍了vue实现录音功能js-audio-recorder带波浪图效果,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2022-08-08
element带输入建议el-autocomplete的使用
本文主要介绍了element带输入建议el-autocomplete的使用,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2022-03-03


最新评论