el-dialog 的坑

最新推荐文章于 2024-09-05 11:08:38 发布
最新推荐文章于 2024-09-05 11:08:38 发布
阅读量481 收藏 8
点赞数 5
CC 4.0 BY-SA版权
分类专栏： vue elementui 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/QQ2856639881/article/details/135210723
文章指出在Vue中使用el-dialog时，应将其放置在最外层，避免嵌套在v-if或v-else指令中，以防止出现未明原因的布局问题。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

el-dialog 尽量放到最外层， 不要包到 v-if 或  <template v-else> 中， 不然出莫名的问题

【el-dialog + video】控制视频弹框的显示与隐藏
m0_56598099的博客
04-07 1166
【el-dialog + video】点击跳出视频弹框易错点更改el-dialog原生样式 易错点 你是否出现过 “el-dialog原生样式难去掉”？ 你是否出现过 “dialog关闭video继续播放”？ 你是否出现过 “切换src，但视频还是之前的”？ 更改el-dialog原生样式 设置class名 ，class=“video-dialog”； .video-dialog { background: transparent; &::v-deep { .el-dialog_
Vue -- 通过 el-dialog 编辑表格中的内容 & 对 el-table 对象数组中赋值时的坑
支棱起来
10-12 1499
html 代码 <el-table-column prop="operation" label="操作" width="120" align="center"> <template slot-scope="scope"> <a style="color:#2C8DF4;text-decoration:underline" @click="editDes(scope.$index,scope.row)">编辑描述</a> <a sty
一文读懂Vue中的el-dialog（附Demo）
码农研究僧的博客
04-15 7250
el-dialog 是 Element UI 框架中的一个组件，用于创建对话框 提供了丰富的功能和选项，可以用来创建各种类型的对话框，如信息确认框、表单填写框等
关于el-dialog 下使用 video/audio/img 不播放不显示问题
panfeigao优快云的博客
05-11 1311
<audio controls="controls" :src="playUrl" autoplay="autoplay" ></audio> <video width="720" height="340" controls autoplay poster="../assets/img/xxx.jpg" :src="playUrl"> </video> data(){ return { playUrl..
el-dialog vue弹窗播放视频video
热门推荐
jiangjiang_ing的博客
01-03 1万+
主要代码如下： &lt;el-table-column align="center" label="视频url"&gt; &lt;template slot-scope="scope"&gt; &lt;el-button type="primary" @click="playVideo(scope.row)"
HTML 5 video 视频标签全属性详解
weixin_34417635的博客
08-09 654
http://www.cnblogs.com/kiter/archive/2013/02/25/2932157.html 现在如果要在页面中使用video标签，需要考虑三种情况，支持Ogg Theora或者VP8（如果这玩意儿没出事的话）的（Opera、Mozilla、Chrome），支持H.264的（Safari、IE 9、Chrome），都不支持的（IE6、7、8）。好吧，现在让我们...
vue element ＜el-dialog＞ 标签 内表单验证坑记录
小学僧的学习笔记
05-08 1211
发生情况：在dialog中写表单验证，dialog框关闭后表单验证还存在 解决： 关闭时直接销毁dialog v-if
开发适合el-dialog的拉伸拖拽自定义指令和适配自定义的图片查看组件
鹤渺的星球
09-05 2024
我之前有开发过一个图片查看的组件，这个组件可在单页面打开，也可以在弹窗里打开，但是弹窗因为是比较固定，所以有一些局限性，只能拖拽，不能改变弹窗大小，于是有了开发【可以拖拽改变大小的弹窗】组件。通过自定义指令，实现弹窗的移动拖拽拉伸等功能动态计算弹窗的位置与尺寸，因为弹窗的位置和尺寸是动态计算的，涉及到鼠标的实时位置和弹窗初始位置之间的关系。代码也贴上去了，仅供参考。
Element-UI el-dialog 二次封装复用
Sandy_zhi的博客
08-07 3881
我很希望项目中可以多接触一些新东西，实践出真知，对于编程来说就是要多动手，多总结几录，多思考，才能更好的避坑，因为动手了会发现好多你以为的不是你以为的。
【避坑指“难”】Element-ui中el-dialog组件显示时有蒙层（遮罩层）怎么破？
椰卤工程师的个人博客
07-06 4163
到底是什么问题？ 没错就是这样，就像上图一样，上传完图片需要预览时，图片被蒙层遮罩住了。 下面是整个组件的代码：图片上传、预览、删除，组件方法可以直接去Element-ui官方文档查看。 <template v-slot:img_upload> <el-upload action="#" list-type="picture-card" :limit="9" :auto
vue element-ui 第一次打开Dialog 对话框无法加载内容的问题
weixin_45547638的博客
11-19 4419
vue element-ui 第一次打开Dialog 对话框无法显示内容 第二次正常显示 问题描述： 今天需要使用Dialog 弹框中加载video视频显示，问题如下 第一次点击弹框可以正常显示 但是内容不加载 报错 第二次可以正常显示内容也加载 问题原因： 出现这个问题的原因是js加载了 但是Dialog 的dom并没有加载完全导致js报错所以不加载 查看官方文档解释如下： Dialog 的内容...
针对element ui plus 的el-dialog问题说明和二次开发
qq_36400043的博客
07-21 1318
针对element ui plus 的el-dialog问题说明和二次开发
el-dialog 的各种正确使用姿势 以及 el-dialog destroy-on-close 无效的解决办法
唐唐唐行的博客
09-29 1万+
el-dialog 的各种正确使用姿势 以及 el-dialog destroy-on-close 无效的解决办法
vue之 el-dialog 那些问题
xinxin_zhu的博客
03-13 2306
1.单独的组件不依赖父组件怎么关闭dialog 把dialog弹出框写在子页面中 不要写在父页面中。在页面中调用弹框页面中的方法进行传值。控制dialog显示 this.$refs.***.funcname(parms)； 2 dialog 弹出框中的页面不显示 不写在弹出框中的页面会显示。多半因为dialog 还未渲染完成 已经加载子页面中的方法。 解决：this.$nextTick(f...
解决el-Dialog闪烁的问题
ZuoZuoDangerou的博客
11-20 3706
问题描述 在使用了饿了么ui弹出组件的时候惊人的发现弹窗会闪烁一下。 问题解决 我检查了代码和数据确定只触发一次，然后我又打了几个断点终于发现了问题，是由于它的动画问题，于是我便去搜索了解决办法发现都是用v-if来解决的，但是使用了v-if动画直接没有了，在美观上这是我不能忍的。于是就继续检查了下去，终于发了是动画冲突的问题，在全局加上这一行代码就完事了，再打开一看果然不会闪动了。 .el-dialog__wrapper{ transition-duration: 0.3s; } 希望对后面同样问题的
解决el-dialog中间自适应的问题
weixin_42447659的博客
11-12 7185
我要做这种效果，搞了快20分钟才找到方法，具体如下 好了，下次记住了！
关于 vue el-dialog 的问题
xfWgaoqiang的博客
10-14 388
element 中 el-dialog与 el-cascader级联选择器一起使用时 就算给el-cascader赋值了对应级的数组 []数据还是不会显示 只需要在这个el-dialog上加:destroy-on-close="true" 每次关闭弹框就会销毁这个组件 这样每次重新赋值就可以显示对应的数据 ...
elementui遇到的问题 ——el-dialog
ZMH的博客
10-12 2828
当对话框的“×号”和 取消按钮都想调用同个消息提示关闭函数时，使用@close出现错误 问题 会出现，你点取消后触发一次消息提示，然后你点确定关闭后，会再次触发对话框的close事件，这样你就会两次有消息提示了。 原因 由于你点取消的时候出现消息提示后，点击“确定”，即会关闭弹窗，所以会触发@close事件 解决方式 可以通过这样解决： <el-dialog title="修改摄像头相关信息" :visible="dialogVisi
el-dialog套el-dialog设置样式
最新发布
03-15
### Vue 中 Element-UI 的 `el-dialog` 组件嵌套样式设置 在 Vue 使用 Element-UI 时，如果需要处理多个嵌套的 `el-dialog` 对话框并为其设置特定样式，则可以通过多种方式实现。以下是关于如何为嵌套的 `el-dialog` 设置样式的具体方法。 #### 1. 防止多余遮罩层 当存在嵌套的 `el-dialog` 时，默认情况下可能会出现多余的遮罩层。通过添加 `append-to-body` 属性可以有效解决这一问题[^2]： ```html <el-dialog :visible.sync="outerDialogVisible" title="外层对话框"> 外层内容... <el-dialog :visible.sync="innerDialogVisible" append-to-body> 内层对话框内容... </el-dialog> </el-dialog> ``` 上述代码中，内层 `el-dialog` 添加了 `append-to-body` 属性，使得该对话框挂载到 body 上而不是父级容器上，从而避免额外遮罩层的影响。 --- #### 2. 自定义样式 为了自定义嵌套 `el-dialog` 的样式，可以通过类名或者作用域样式的方式进行调整。例如，在外层和内层分别应用不同的样式： ```html <el-dialog :visible.sync="outerDialogVisible" class="custom-outer-dialog"> 外层内容... <el-dialog :visible.sync="innerDialogVisible" append-to-body class="custom-inner-dialog"> 内层对话框内容... </el-dialog> </el-dialog> ``` 对应的 CSS 样式如下： ```css /* 外层对话框 */ .custom-outer-dialog { border-radius: 8px; } /* 内层对话框 */ .custom-inner-dialog .el-dialog__header { background-color: #f0f0f0; } ``` 这样可以根据实际需求对外层和内层对话框单独定制样式。 --- #### 3. 解决子对话框被遮挡的问题 对于两层 `el-dialog` 是直接父子关系的情况，可能由于默认 z-index 导致子对话框的内容被遮盖。此时除了使用 `append-to-body`，还可以配合 `modal-append-to-body` 来进一步优化[^3]： ```html <el-dialog :visible.sync="outerDialogVisible" title="外层对话框" modal-append-to-body> 外层内容... <el-dialog :visible.sync="innerDialogVisible" append-to-body modal-append-to-body> 内层对话框内容... </el-dialog> </el-dialog> ``` 此配置能够确保内外层对话框都正确渲染于页面顶层，不会互相干扰。 --- #### 4. 动态控制标题栏行为 有时项目需求会涉及修改弹窗标题的行为或外观，比如增加按钮等功能。这可通过插槽 (Slot) 实现[^4]： ```html <el-dialog :visible.sync="dialogVisible" custom-class="title-slot-dialog"> <!-- 插槽用于替换默认标题 --> <template slot="title"> <div style="display: flex; justify-content: space-between;"> <span>自定义标题</span> <button @click.stop="handleDownload">下载</button> </div> </template> 弹窗主体内容... </el-dialog> ``` 在此基础上也可以扩展更多交互逻辑，满足复杂场景下的功能需求。 --- #### 总结 以上介绍了几种针对嵌套 `el-dialog` 的常见样式设置与问题解决方案，包括但不限于防止多余遮罩层、动态控制标题以及解决子对话框被遮挡等问题。每种方案均基于官方推荐的最佳实践，并结合实际开发经验进行了补充说明。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值