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

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

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

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

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

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

相关推荐
燐妤几秒前
前端HTML编程4:深入学习CSS
前端·学习·html
2301_816374335 分钟前
服务访问的用户认证
前端·网络
XS0301065 分钟前
从浏览器到互联网的完整数据流
前端·数据库·servlet·交互
hhb_61811 分钟前
MATLAB数值计算与数据可视化核心技术梳理及实战应用案例解析
前端
lichenyang45312 分钟前
从零理解微前端:基于 React + Vite + qiankun 的子应用切换 Demo
前端·react.js·状态模式
2601_9577808425 分钟前
AI智能体时代:为什么HTML正在取代Markdown成为新一代输出标准
大数据·前端·人工智能·gpt·html·claude
2301_815279521 小时前
如何实现C++ Web 自动化测试实战:常用函数全解析与场景化应用指南
开发语言·前端·c++
代码不停1 小时前
Spring Web MVC
前端·spring·mvc
倾颜7 小时前
从 textarea 到 AI 输入框:用 Tiptap 实现 / 命令、@ 引用和结构化请求
前端·langchain·next.js
kyriewen8 小时前
程序员连夜带团队跑路,省了23万:这AI太贵,真的用不起了
前端·javascript·openai