vue使用多级弹窗(Dialog)出现蒙版遮罩问题及解决
更新时间：2024年02月29日 09:47:55 作者：DamonREN
这篇文章主要介绍了vue使用多级弹窗(Dialog)出现蒙版遮罩问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
场景
结果列表按钮对应了一个结果列表弹窗，页面中每条结果后又有下载和查看结果按钮，查看结果按钮很明显由对应一个弹窗页面。
因此这属于多级弹窗（使用的是Dialog）
当出现第一级弹窗时，可以正常关闭开启；
当出现第二级弹窗后，第二级弹窗打开后就无法关闭，很明显是出现了蒙版遮罩问题。
效果演示
（图二完全置灰，无法点击任何按钮）
解决方案
出现蒙版遮罩和层级肯定是有关，但是尝试设置z-index没有任何效果。
查看https://element.eleme.io/#/zh-CN/component/dialog官网Dialog对话框参数中有：
这两个属性是关于遮罩层问题的
添加 :append-to-body="true" 后，就解决了遮罩层的问题，可以参照下属性说明来理解下。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了Vue中如何使用方法、计算属性或观察者的相关知识，非常不错，具有一定的参考借鉴价值 ,需要的朋友可以参考下2018-10-10
解决VueCil代理本地proxytable无效报错404的问题
这篇文章主要介绍了解决VueCil代理本地proxytable无效报错404的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
vue.js中window.onresize的超详细使用方法
这篇文章主要给大家介绍了关于vue.js中window.onresize的超详细使用方法,window.onresize 是直接给window的onresize属性绑定事件,只能有一个,文中通过代码介绍的非常详细,需要的朋友可以参考下2023-12-12
这篇文章主要介绍了vue-cli4.x创建企业级项目的方法步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-06-06
组件是可以在它们自己的模板中调用自身的,不过它们只能通过 name 选项来做这件事,下面这篇文章主要给大家介绍了关于Vue组件化开发的必备技能之组件递归的相关资料,需要的朋友可以参考下2022-01-01
这篇文章主要介绍了Vuejs如何通过Axios请求数据，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
vue.js2.0 实现better-scroll的滚动效果实例详解
better-scroll 是一个移动端滚动的解决方案，它是基于 iscroll 的重写。better-scroll 也很强大，不仅可以做普通的滚动列表，还可以做轮播图、picker 等等，下面通过本文给大家介绍vue.js2.0 实现better-scroll的滚动效果，感兴趣的朋友一起看看吧2018-08-08
这篇文章主要介绍了vue下拉刷新组件的开发及slot的使用详解,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-12-12
vue深拷贝的三种实现方式：1、通过递归方式实现深拷贝；2、JSON.parse(JSON.stringify(obj))；3、jQuery的extend方法实现深拷贝,本文通过实例代码给大家介绍的非常详细,需要的朋友参考下吧2023-11-11
本文主要介绍了Webpack和Vite的区别小结，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-05-05
最新评论