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中如何使用ztree,包括配置package.json，自动加载jquery的方法，本文给大家介绍的非常详细，具有参考借鉴价值，需要的朋友可以参考下2018-02-02
解决vue this.$forceUpdate() 处理页面刷新问题（v-for循环值刷新等）
这篇文章主要介绍了解决vue this.$forceUpdate() 处理页面刷新问题（v-for循环值刷新等），解决方法是使用this.$forceUpdate()强制刷新，文章给大家分享了代码案例，需要的朋友参考下吧2018-07-07
一步步教你利用webpack如何搭一个vue脚手架（超详细讲解和注释）
这篇文章主要给大家介绍了软玉利用webpack如何搭一个vue脚手架的相关资料，文中有超详细讲解和注释，对大家学习或者使用webpack具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。2018-01-01
Vue3新特性之在Composition API中使用CSS Modules
这篇文章主要介绍了Vue3新特性之在Composition API中使用CSS Modules,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-07-07
这篇文章主要介绍了Vue组件通信传递数据的三种方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧2023-04-04
这篇文章主要给大家介绍了关于element中一个单选框radio时的选中和取消的相关资料,文中通过图文以及代码示例介绍的非常详细,对大家的学习或者工作具有一定的参考价值,需要的朋友可以参考下2023-09-09
这篇文章主要介绍了Vue组件化通讯的实例代码的相关资料,需要的朋友可以参考下2017-06-06
大家都知道vue-router有两种模式，hash模式和history模式，带＃的则是hash模式。接下来给大家带来了Vue 去除路径中的＃号的解决方法，感兴趣的朋友一起看看吧2018-04-04
这篇文章主要给大家介绍了关于Vue3父子组件相互调用方法的相关资料,vue中我们常常用到组件,那么组件中互相调用也是经常遇到的,需要的朋友可以参考下2023-08-08
vue中element-ui表格缩略图悬浮放大功能的实例代码
element-ui界面非常简洁和美观，提供的组件可以满足绝大多数的应用场景，当表格中显示了图片的缩略图时，想要鼠标浮动在缩略图上时放大图片的效果，该如何实现呢？下面小编通过实例代码给大家介绍vue中element-ui表格缩略图悬浮放大功能，一起看看吧2018-06-06
最新评论