el-dialog“闪动”解决办法

最新推荐文章于 2024-11-08 13:27:07 发布

宸晓闹

最新推荐文章于 2024-11-08 13:27:07 发布

阅读量1.5k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.csdn.net/weixin_42956406/article/details/115318987

vue 专栏收录该内容

8 篇文章

订阅专栏

本文探讨了在Vue项目中遇到的el-dialog关闭时触发两次弹窗的异常现象。通过在el-dialog组件上添加v-if指令，根据对话框的可见性状态决定其是否渲染，从而避免了关闭时多余的弹出。这种方法有效地解决了对话框重复显示的问题，确保了用户体验的顺畅。

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

问题描述：el-dialog关闭的时候总是出现两次弹窗
代码实践：在el-dialog上添加上一个v-if，值就是用闭窗的值，促使闭窗的时候就直接销毁窗口，这样就不可能再有弹出窗口事件了

<el-dialog title="XXX" :visible.sync="dialogFormVisible" v-if="dialogFormVisible">
    XXX...
</el-dialog>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

宸晓闹

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

vue 实现抽奖转盘

qq_37816525的博客

07-31

6397

转盘效果使用原生js 和css3动画实现中奖概率由后端控制，后端返回中奖金额和中奖名称，前端处理指针显示的地方本demo 实现的是转盘转动指针不动的效果 ...

【css】问题集锦

Beam

08-20

1482

一、fixed超出窗口大小部分无法滚动问题：使用fixed固定一个div，当这个div高度大于窗口高度后，超出的内容无法滚动查看。 解决办法：在设置fixed的div添加样式 height:100%;overflow:auto; 即可。据说还可以设置样式 max-height:100%;overflow:auto; 即可。具体还是根据情况设置当前div的宽度，若当前div宽度是个固定值不想设置成百分数，则：可以在外层包裹一个div设置为position:fixed;height:100%;ove

参与评论您还未登录，请先登录后发表或查看评论

解决el-Dialog闪烁的问题

ZuoZuoDangerou的博客

11-20

3706

问题描述在使用了饿了么ui弹出组件的时候惊人的发现弹窗会闪烁一下。问题解决我检查了代码和数据确定只触发一次，然后我又打了几个断点终于发现了问题，是由于它的动画问题，于是我便去搜索了解决办法发现都是用v-if来解决的，但是使用了v-if动画直接没有了，在美观上这是我不能忍的。于是就继续检查了下去，终于发了是动画冲突的问题，在全局加上这一行代码就完事了，再打开一看果然不会闪动了。 .el-dialog__wrapper{ transition-duration: 0.3s; } 希望对后面同样问题的

关于在Element-UI的dialog对话框中点击选中导致对话框闪烁的问题

fmyahxm的博客

08-14

3088

问题描述：在dialog中使用select选择器和radio单选框点击导致对话框闪烁，为什么会出现这种情况呢？我们先来看下解决方法！解决方法： 1.在对话框中添加backface-visibility属性 — 意为旋转元素不面向屏幕时隐藏 .el-dialog{ backface-visibility:hidden; -webkit-backface-visibility:...

element-ui解决el-dialog的闪烁问题

qazxbjp2010的博客

04-14

7056

之前的项目都是网站项目，一般都是要自己写UI，最近开发后台项目使用element-ui，也遇到了一些坑，譬如在使用is动态组件的时候，两个动态组件都是dialog，切换的时候会闪烁，查了半天原因发现是dialog打开和关闭动画造成的。简单粗暴的解决方法是直接在dialog加v-if="visible" 这样就没有关闭动画了，解决闪烁。在优化一点的方案是把dialog在独立成一个组件，在di...

【ElementUI】dialog弹窗出现闪屏问题解决办法

weixin_42342065的博客

04-15

8715

场景：在使用vue+elementui开发项目的时候提示信息一般会使用el-dialog组件，此时是没有问题的。但当我们多次调用弹窗的时候，比如：有A,B,C三个弹窗，当弹窗A点击确定的时候关闭弹窗A打开弹窗B，当弹窗B点击确定的时候关闭弹窗B打开打开弹窗C，在弹窗切换的时候会出现闪烁一下的情况。原因是：当一个弹窗关闭之后另一个弹窗可能还没打开，这个中间的空格期就是会出现遮罩层也就是我们说的闪烁情况。如下： 解决办法：给需要关闭的弹窗设置时间间隔。比如需要关闭弹窗A(:visible.sync=‘di

Element UI - 打开弹出框（el-dialog）页面会抖动是什么原因？

最新发布

05-08

以下是针对上述原因的具体解决办法： 1. **保持 `uid` 不变** 在上传成功的回调函数中，将服务器返回的数据中的 `uid` 设置为原始文件对象的 `uid`，这样可以避免因为 `uid` 变化而导致的重绘问题。具体实现如下...

el-upload上传回显

01-08

<el-dialog :visible.sync="dialogVisible"> <img width="100%" v-if="isImage" :src="dialogImageUrl" alt=""> <video controls autoplay v-else>您的浏览器不支持 video 标签。 </el-dialog> export ...

firefox 滚动条消失引起页面抖动的问题

09-25

为了解决这一问题，我们可以采取一些 CSS 技巧来优化页面布局，使得滚动条的切换更为平滑，减少对用户体验的影响。针对“firefox 滚动条消失引起页面抖动的问题”，上述提供的代码片段提供了一种解决方案： ```...

多个el-dialog弹框切换会出现闪烁

m0_56683897的博客

08-14

1384

这时候我们在点击下一步执行方法，关闭上一个弹窗打开下一个弹窗的时候，页面有一个明显的闪烁，对于用户体验来说不够丝滑，其实也不难看出是因为关闭上一步弹窗的时候同时关闭了遮罩层，开启的时候重新打开遮罩层导致的，使他们中间有一个亮度的闪烁，解决方法也很简单。在使用element-ui的弹窗组件el-dialog时候，可能会有这样子的需求，点击新增按钮或者修改按钮，打开一个弹窗，然后点击下一步，关闭当前弹窗，打开另一个弹窗，最后在第二步或者第三步弹窗提交数据，像这样。

Element UI Dialog 闪烁问题

weixin_45460053的博客

03-17

2215

记录一个问题，今天在使用elementui中dialog组件时，将dialog组件封装成一个业务组件，在之后的使用中发现了一个问题。使用的场景是需要循环出来很多按钮，在按钮上绑定dialog事件，根据type传递参数，来切换不同样式的dialog。在使用过程中发现dialog组件会发生闪烁bug。最后经过一番痛苦的排查和尝试，原来是组件上绑定了：key的属性，属性值是type，只需要把这个属性删除掉，就没有问题了，其实这个dialog不经过循环，所以这个key完全是我写代码时粗心写上的。记录问题，引以

element的el-dialog初始化visible值为true时，弹窗闪烁问题

Wangdr的博客

10-09

498

设置这个参数为true。

el-el-dialog 弹窗抖动完美解决

weixin_42777161的博客

03-07

665

* 以下css是用来解决el-diao 窗口抖动的问题 */

easyUI - 打开弹出框（el-dialog）页面会抖动的解决方法

qq_36627117的博客

05-18

798

应用情景当 dialog 出现时，页面右边缩小了 5px，看起来像是标题所说的抖动了一下。解决方案然后我看了一下页面的样式，发现 body 多了样式：padding-right: 5px 和 overflow: hidden。紧接着我就在全局设置 body 的 paddin...

el-dialog关闭时有抖动

weixin_45884508的博客

03-28

1151

在el-dialog的父元素中添加一个min-height，并设置为与el-dialog的高度相等，这样在el-dialog关闭时，父元素的高度不会突然变小，从而避免抖动现象。使用transition来平滑过渡，可以使用vue的transition组件，当el-dialog关闭时，添加一个过渡效果，使得其平滑的消失，不会出现抖动现象。这里使用的是opacity来进行过渡效果，当el-dialog关闭时，opacity会从1到0过渡，使得其平滑的隐藏，从而避免抖动现象。

Element UI组件Dialog显示闪动问题【解决方案】

weixin_43617604的博客

11-08

1278

重置padding-right：当el-dialog打开时，ElementUI会给body元素添加一个padding-right样式，以防止内容在滚动条消失时溢出。防止页面抖动：有时页面的抖动是由于滚动条的突然出现或消失导致的。你可以尝试在body元素上添加一些样式来防止这种情况的发生，例如：在弹窗打开时设置body的overflow为hidden，在弹窗关闭时恢复。ElementUI的el-dialog组件在打开时默认会锁定页面的滚动条，这有时会导致页面布局的变化，从而产生抖动。

element两个dialog切换会出现闪烁

想去旅行的静静的博客

04-16

2319

弹窗A、B，B在A上面，这时候关闭B，只显示A。这时候A会闪烁一下。 解决办法： 1、使用同一个dialog，点击下一步，切换dialog内容。 2、dialog加v-if="visible" ，这样就没有关闭动画了，解决闪烁。 3、dialog独立成一个组件，在dialog中判断动态组件。 ...

使用Vue+elementUI开发前端页面，打开对话框时页面出现抖动的问题

weixin_42965737的博客

10-27

3635

** 打开对话框时页面出现抖动是因为页面的右侧出现滑块,打开对话框的时候滑块消失造成抖动。 ** <style scope> /* 防止打开对话框时页面的抖动 */ body{ padding-right: 0px !important; overflow: hidden; } </style> 如果按照上述的设置不会起到作用，因为"<style scope>"中将css样式设定为局部的。所以需要将"scope"去掉。 ...

el-dialog套el-dialog设置样式

03-15

以上介绍了几种针对嵌套 `el-dialog` 的常见样式设置与问题解决方案，包括但不限于防止多余遮罩层、动态控制标题以及解决子对话框被遮挡等问题。每种方案均基于官方推荐的最佳实践，并结合实际开发经验进行了补充...