elementUI复制的dialog对话框打开页面变灰了

于 2024-09-04 10:03:41 发布
阅读量411 收藏
点赞数 7
分类专栏： elementUi 前端 文章标签： elementui 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/m0_66202319/article/details/141885589
版权

复制elementUI的dialog对话框代码直接打开会变灰

点第二下就正常了

但这并不是长久之计，对于我们优雅的程序员来说这是十分不能取的。

后面经过研究查阅解决了，需要在<el-dialog>标签上面加上这个属性

:modal-append-to-body="false"

OK了，重新运行后就发现不会变灰了。

Vue - ElementUI 模态框Dialog、Drawer抽屉框，将append-to-body设置为true后，使用deep覆盖样式失效解决办法（将弹框插入到body中样式覆盖失败）
王二红
03-20 3878
vue2，element-ui，el-drawer，el-dialog，抽屉弹框，对话框模态框，append-to-body，插入到body中无法使用deep覆盖样式，在elementui组件库中，使用el-drawer抽屉弹框组件，当设置append-to-body属性后，无法使用deep进行样式覆盖怎么办，关于vue+element中el-dialog设置append-to-body样式不生效问题，vue2elementUIel-dialog修改了body样式不生效问题解决方案，element组件
黑马JavaWeb开发笔记09——ElementUI代码引入教程、Element常用组件使用（Table, Pagination, Dialog, Form）
apple_68589597的博客
08-29 1951
本篇文章是2023年最新黑马JavaWeb开发笔记09：ElementUI代码进入教程、常用组件使用的总结，帮助需要学习Web开发的朋友温故而知新。
Element ui 的组件弹窗 el-dialog点击的时候全屏变灰问题解决
CXYCMY的博客
01-29 2059
Dialog嵌套显示变灰问题解决方案
elementUI的Dialog对话框使用过程中出现灰色遮罩点击才关闭遮罩问题解决办法
super码力的博客
06-06 4011
elementUI的Dialog对话框使用过程中出现灰色遮罩点击才关闭遮罩问题解决办法，可以使用官方文档里面提供了一个append-to-body的属性解决
el-dialog 点开后背景是灰色，但是点击以后就又好了，解决方法
easyplayers的博客
11-19 3017
el-dialog 点开后背景是灰色，但是点击以后就又好了，解决方法
element ui 两个弹层 背景变灰色问题
y1323400186的博客
12-06 780
在第二个弹层里面加上:append-to-body=“true” 完美解决 <el-dialog :visible.sync="dialogVisiblelistone" :append-to-body="true"> <img width="100%" :src="dialogImageUrlone" class="avatar" /> </el-dialog> ...
Avue、Element页面弹出dialog页面被遮盖灰色，这样解决
qq_54524289的博客
02-24 481
Avue、Element页面弹出dialog页面被遮盖灰色，这样解决
13、通过子组件实现对话框的打开
weixin_51915021的博客
05-12 1128
Vue3 + .net core6 WebAPI前后端分离
解决elementUI中el-form、el-dialog、数据回显同时用时，有bug
阿超的博客
10-29 4683
第一次打开网页，先点击修改，再点击新增，发现输入框竟然有值， 点击修改后，关闭对话框的时候，置空失效了
VUE+elementUI实现弹窗（dialog）编辑某条数据
热门推荐
王魂风气的博客
11-11 1万+
最近要使用VUE+elementUI的框架，我开始学习了vue的知识，在写demo实现弹窗编辑表格数据的时候遇到了一个问题：弹窗中的数据不知道怎么传到对应的表格中去，网上搜了一大堆，都是粘贴复制的，只实现了打开弹窗，弹窗获取表格中数据，而没有实现怎么把弹窗中的值写入到表格中。 经过摸索，最后我终于实现了，完整代码如下： <template> <div id="app" sty...
el-dialog弹窗点击出现灰色层问题
m0_68826786的博客
04-06 1031
el-dialog弹窗点击出现灰色层问题
el-dailog 显示出现灰色原因及解决方法
tonysh_zds的博客
09-17 4076
打开弹出框 第二个弹出框 样式 .v-modal{ opacity: 0.5 } 原有是第二个弹出框:append-to-body="false" 解决方法： 修改第二个弹出属性 :append-to-body="true" 。 如： <el-dialog :append-to-body="true" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.ti
vue el-dialog全屏变灰问题
WISDOMPYC的博客
02-07 915
vue el-dialog全屏变灰问题
dialog 打开后需要点击一下才能 的问题
SanOrintea的博客
08-20 848
dialog刚出来，全屏就灰掉了，需要点击一下才能正常。这是因为dialog在蒙版以下，所以让dialog渲染在蒙版以上的方式是用设定嵌套dialog时附加的一个小特性解决 以下复制与elementui官方文档 正常情况下，我们不建议使用嵌套的 Dialog，如果需要在页面上同时显示多个 Dialog，可以将它们平级放置。对于确实需要嵌套 Dialog 的场景，我们提供了append-to-body属性。将内层 Dialog 的该属性设置为 true，它就会插入至 body 元素上，从而保证内外层 Dial
Element UI 双层弹窗 背景变灰问题 （遮罩层）
qq_57229245的博客
02-22 1199
只需要在第二个Dialog上加上append-to-body属性就可以完美解决问题。第二个弹窗不会被灰色遮罩遮盖。
element-ui中弹框dialog不显示，仅背景变灰
xy405580364的博客
11-04 5779
1.问题描述 根据element官网的对话框代码，使用时会发现弹框不显示，需要增加一个属性 :append-to-body="true" 2.加上之后效果 <template> <el-button type="text" size="mini" @click="copyPanel = true">复制</el-button> <el-dial...
vue element 弹出框变为灰色
小小董的博客
03-27 4272
出现上面问题 此时需要将这个加进去
解决element 弹窗屏幕变灰的问题（双层弹窗）（遮罩层问题）
weixin_49376462的博客
07-04 8075
新增按钮弹窗，新增按钮里需要选择部门，又一个弹窗，此时点第二个弹窗的时候页面会灰。model-append-to-body属性是是否让遮罩层插入body上面，如果为false，则遮罩层是在父元素身上的。
elementui 在drawer 中打开 dialog 会全局灰屏
jiangyue2694的博客
06-04 1922
elementui 在drawer 中打开 dialog 会全局灰屏 解决方法 给dialog 中加上 append-to-body 就可以了
为什么elementui的dialog对话框过高会被拖动的bug
最新发布
12-06
在Element UI中，Dialog对话框过高时会被拖动的bug主要是由于对话框的高度超过了浏览器窗口的高度，导致拖动时的计算出现误差。具体原因如下： 1. **高度溢出**：当Dialog对话框的高度超过浏览器窗口的高度时，用户在拖动对话框时，鼠标的移动距离和对话框的移动距离不匹配，导致对话框被拖出可视区域。 2. **拖动事件处理**：Element UI的对话框拖动功能是基于鼠标事件的。如果对话框的高度超过浏览器窗口的高度，拖动事件处理函数可能无法正确计算对话框的新位置，从而导致对话框被拖动的bug。 解决方法： 1. **限制对话框高度**：在设计对话框时，尽量限制其高度，避免超过浏览器窗口的高度。 2. **自定义拖动逻辑**：如果必须使用高对话框，可以自定义拖动逻辑，确保在拖动时对话框不会超出浏览器窗口的可见区域。 3. **使用CSS调整**：通过CSS调整对话框的样式，使其在高度超过浏览器窗口时自动出现滚动条，而不是被拖动。 示例代码： ```html <template> <el-dialog :visible.sync="dialogVisible" :before-close="handleClose" :modal="false"> <!-- 对话框内容 --> </el-dialog> </template> <script> export default { data() { return { dialogVisible: false }; }, methods: { handleClose() { this.dialogVisible = false; } } }; </script> <style> .el-dialog { max-height: 80vh; /* 设置最大高度为视口高度的80% */ overflow-y: auto; /* 超出部分出现滚动条 */ } </style> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值