Element ui 的组件弹窗 el-dialog点击的时候全屏变灰问题解决

最近在使用Element UI 的弹窗组件的时候发现这个组件各种的应用都没有问题,数据和元素的应用都是正确的但是在点击显示这个弹窗的时候全屏幕都会变灰。

这也不是因为增加了modal 遮挡幕的问题,在经过不断的排查代码的时候基本排除了代码的问题,这个时候就觉得是不是因为组件的某个元素使的这个屏幕变灰,这个时候就一直在百度这个问题,发现网上很多都是说这个组件的遮挡幕元素的布尔值设置的问题,但是在修改的过程中也排查了不是因为这个而导致的。

最后又看到很多例子都是简单的显示,但是我是在一个表格里面嵌套了template,然后在template中使用的Dialog组件,这就有可能导致一个显示的层级问题,导致他在点击的时候显示灰色,这个时候看到elment-ui文档中有一个append-to-body属性: Dialog 自身是否插入至 body 元素上。嵌套的 Dialog 必须指定该属性并赋值为 true

也就是因为忽略了这个嵌套的Dialog必须指定属性为true从而导致我的弹出框是灰色的,在修改了布尔值之后,弹框就可以正常的使用了。

**PS:**以后在使用组件的时候一定要注意组件的元素说明,否则就容易和我一样因为这个而白白耗费一两个小时来解决问题

相关推荐
FreeBuf_10 分钟前
恶意Chrome扩展窃取钱包登录凭证并实施自动化交易
前端·chrome·自动化
Mr_sun.11 分钟前
Day02——基础数据开发-服务管理前端
前端·状态模式
qq_124987075312 分钟前
基于微信小程序的垃圾分类信息系统(源码+论文+部署+安装)
java·前端·spring boot·后端·微信小程序·小程序·计算机毕业设计
琹箐14 分钟前
AntDesign AFormItem中表单元素嵌套及校验
前端·javascript·vue.js
梦65019 分钟前
VUE3简单实现九宫格点击抽奖
前端·javascript·vue.js
郑州光合科技余经理22 分钟前
中台架构实战:同城O2O系统二次开发与部署指南
java·大数据·开发语言·前端·后端·架构·php
人道领域26 分钟前
JavaWeb从入门到进阶(HTML)
前端·html
爱吃山竹的大肚肚32 分钟前
Nginx 最核心和常用的命令
java·运维·服务器·前端·nginx
光影少年1 小时前
next.js与纯react区别
前端·javascript·react.js
派大鑫wink1 小时前
【Day31】Web 开发入门:HTTP 协议详解(请求 / 响应、状态码、请求头)
前端·网络协议·http