element-ui使用弹窗 “发生闪动“ 的解决办法

最新推荐文章于 2024-07-09 09:36:44 发布
最新推荐文章于 2024-07-09 09:36:44 发布
阅读量1.8k 收藏
点赞数
分类专栏： 前端
原文链接：https://blog.csdn.net/weixin_35773751/article/details/96734828?ops_request_misc=&request_id=&biz_id=102&utm_term=element%20%E5%BC%B9%E7%AA%97%20%22%E5%8F%91%E7%94%9F%E9%97%AA%E5%8A%A8%22%20%E7%9A%84%E8%A7%A3%E5%86%B3%E5%8A%9E%E6%B3%95&utm_medium=distribut
版权

elementui

问题:el-dialog关闭的时候总是出现两次弹窗

解决:在el-dialog上添加上一个v-if，值就是用闭窗的值，促使闭窗的时候就直接销毁窗口，这样就不可能再有弹出窗口事件了

<el-dialog 
	width="0"
	v-if="dialogshut"
	:title="addmen"
	:visible.sync="dialogshut"
>
</el-dialog>
努力学习的男孩
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
hover事件导致闪烁问题
qq_43469899的博客
11-11 3357
今天博主在做前端的时候遇到了一个特别头疼的问题: 在拿到一个已经做了的项目来修改样式的时候,发现样式内嵌套了ivew的样式,导致hover事件出现两个问题 <div class="bottom-panel" v-if="showActiveLayerList"> <div class="title"> ...
【干货分享】解决element弹框组件导致页面抖动问题
Shids_的博客
07-26 3780
【干货分享】解决element弹框组件导致页面抖动问题
【Electron】论那些大大小小的坑
qq_45587822的博客
04-08 323
以下是本人在学习electron时遇到的大大小小的坑，在此做一下笔记。 特此说明，此文方法并非完全正确，仅仅本人做的记录，仅供参考 1.electron使用Python2.7依赖，使用npm安装成功后，不再执行下一步操作，退出后再次npm install，npm run …时提示缺少依赖 Answer： npm install python2.7-Cython --save-dev 查看错误日志，...
解决el-dialog弹框出现页面抖动问题
最新发布
m0_69538493的博客
07-09 404
main.js(后只需要添加ElementUI.Dialog.props.lockScroll.default = false;添加 Dialog.props.lockScroll.default = false。
使用electron-vue构建的应用打包后el-dialog弹出框右上角关闭按钮显示异常
weixin_43398820的博客
08-14 1170
背景： electron-vue中使用了element-ui中的el-dialog来显示弹出框，在打包后el-dialog右上角的关闭按钮显示异常，具体现象如下图所示： 分析 查看错误信息显示element-icons-fonts.woff 和 element-icons-fonts.ttf没有找到。 通过asar解压app.asar文件中可以看到文件在element-fonts中但是最终查找是在electron-main-fonts去查找了。 解决 .electron-vue目录下的webpack
【ElementUI】dialog弹窗出现闪屏问题解决办法
weixin_42342065的博客
04-15 7842
场景： 在使用vue+elementui开发项目的时候提示信息一般会使用el-dialog组件，此时是没有问题的。但当我们多次调用弹窗的时候，比如：有A,B,C三个弹窗，当弹窗A点击确定的时候关闭弹窗A打开弹窗B，当弹窗B点击确定的时候关闭弹窗B打开打开弹窗C，在弹窗切换的时候会出现闪烁一下的情况。原因是：当一个弹窗关闭之后另一个弹窗可能还没打开，这个中间的空格期就是会出现遮罩层也就是我们说的闪烁情况。如下： 解决办法： 给需要关闭的弹窗设置时间间隔。比如需要关闭弹窗A(:visible.sync=‘di
element-ui：多个el-dialog弹框切换会出现闪烁
彭世瑜的博客
12-09 2049
使用多个element-ui组件el-dialog弹框切换。打开A弹框，点击关闭，紧接着打开B弹框。给第一个弹框关闭加一点延迟。会出现一个明显的闪烁。
el-dialog 中使用 el-select,el-checkbox, 选择的时页面闪烁根本问题，操作时闪现
前端小牛__栗鼠
04-20 2249
如果你对el-dialog做了这样的优化 .el-dialog { display: flex; flex-direction: column; margin: 0 !important; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); ...
多个el-dialog弹框切换会出现闪烁
m0_56683897的博客
08-14 957
这时候我们在点击下一步执行方法，关闭上一个弹窗打开下一个弹窗的时候，页面有一个明显的闪烁，对于用户体验来说不够丝滑，其实也不难看出是因为关闭上一步弹窗的时候同时关闭了遮罩层，开启的时候重新打开遮罩层导致的，使他们中间有一个亮度的闪烁，解决方法也很简单。在使用element-ui的弹窗组件el-dialog时候，可能会有这样子的需求，点击新增按钮或者修改按钮，打开一个弹窗，然后点击下一步，关闭当前弹窗，打开另一个弹窗，最后在第二步或者第三步弹窗提交数据，像这样。
element-ui中dialog弹窗关闭按钮失效的解决
10-14
在使用element-ui的el-dialog组件时，有时可能会遇到关闭按钮失效的问题。这个问题可能是由于多种原因导致的，比如数据绑定或者事件监听设置不当等。在element-ui中，Dialog组件的使用是相对直观的，但有时在复杂的...
element-ui.rar element-ui核心库压缩包
12-20
Element UI 是一个基于 Vue.js 的开源 UI 组件库，它为开发者提供了丰富的界面组件，...这个“element-ui.rar”压缩包就是你开始使用 Element UI 的起点，解压后可以查看其内部结构，进一步学习和了解每个组件的用法。
Element-UI使用手册1
08-03
这是一个关于Element-UI的基础使用手册，Element-UI是一个基于Vue.js的开源UI组件库，用于快速构建现代化的Web应用程序。手册主要分为几个部分，包括开发指南、基本组件和表单组件。 1. **开发指南**： - **安装**...
vue-i18n结合Element-ui的配置方法
10-16
为了整合国际化文件，作者建议在i18n.js文件中合并Element-ui和自定义的国际化文件，并使用Object.assign方法将它们的对象合并为一个。这样可以避免在main.js中引入大量的代码，简化了项目的结构。 ```javascript ...
使用elementui的dialog弹框时页面会闪一下
lunadingqi123的博客
05-28 6035
使用elementui的dialog弹框页面抖动，会闪一下问题：解决： 问题： vue项目中使用了elementui的dialog弹窗，当弹窗出现时，原先的页面会抖一下。 解决： 在app.vue页面中设置全局body的样式为 padding-right:0 !important 即可解决页面闪一下的问题。 ...
hover事件出现闪烁
weixin_30908649的博客
11-23 444
要得到的效果：在jx项目中，ul里面有很多个li li里面还包含一个图层（鼠标移上去图层显示出来 移出隐藏） 问题：当鼠标移动上去的时候会出现闪烁。 原因：用的hover 标签 鼠标移动上去li全部出现鼠标移动效果 所以才会出现闪烁。 解决办法：换成mouseover和mouseleave 如： $(function(){ $(".menu_1_1 li").mouseo...
关于element UI 中使用下拉弹出框之类的组件容易出现弹出框会位移
LowVoice的博客
11-05 2109
在项目中发现的一个bug就是在使用element UI的下拉组件的时候，点击选项下拉后页面滚动。会出现弹框位置固定了。 然后在组件api中发现一项解决了问题。 只需要在el-select标签中加入**:popper-append-to-body=“false”**这个属性，记住前面有“：”哟。 然后发现element 其他的弹框组件也有类似的问题但是加上**:popper-append-to-body="false"这个属性没生效。 后来发现可以加入:append-to-body=“false”**这个
vue+elementUI加载表格页面时闪烁问题解决
weixin_43189363的博客
04-20 2943
今天在用vue+elementUI写前端的时候遇到了带表格的页面加载会闪烁这一问题，搜索了好多文章都是说加v-cloak或者关于v-if的，看了一圈也无法解决我的问题，最后发现时data数据定义的时候错了，改成数组形式成功解决。特此记录，希望能帮助到以后的踩坑人~片段代码如下： <el-table :data="workerTableData" class="table" header-cell-class-name="table-header" > 错误版本： workerT
element-ui解决el-dialog的闪烁问题
qazxbjp2010的博客
04-14 6761
之前的项目都是网站项目，一般都是要自己写UI，最近开发后台项目使用element-ui，也遇到了一些坑，譬如在使用is动态组件的时候，两个动态组件都是dialog，切换的时候会闪烁，查了半天原因发现是dialog打开和关闭动画造成的。 简单粗暴的解决方法是直接在dialog加v-if="visible" 这样就没有关闭动画了，解决闪烁。 在优化一点的方案是把dialog在独立成一个组件，在di...
Element UI Dialog 闪烁问题
weixin_45460053的博客
03-17 2070
记录一个问题，今天在使用elementui中dialog组件时，将dialog组件封装成一个业务组件，在之后的使用中发现了一个问题。 使用的场景是需要循环出来很多按钮，在按钮上绑定dialog事件，根据type传递参数，来切换不同样式的dialog。在使用过程中发现dialog组件会发生闪烁bug。 最后经过一番痛苦的排查和尝试，原来是组件上绑定了：key的属性，属性值是type，只需要把这个属性删除掉，就没有问题了，其实这个dialog不经过循环，所以这个key完全是我写代码时粗心写上的。 记录问题，引以
element-ui 表格弹窗
04-28
element-ui 表格弹窗是 element-ui 组件库中提供的一种专门用于展示数据的弹窗组件，常常用于在表格中进行详细数据展示或编辑、删除等操作时使用。它可以通过传入一些参数实现自定义内容、弹窗大小等操作。 它的使用非常简单，只需要在需要使用的地方导入该组件，然后通过一些设置即可实现相应的功能。例如，在表格中点击某一行时可以弹出该行数据的详细信息，可以通过监听 `row-click` 事件，并在其中使用 `this.$refs.table.showTooltip()` 方法来弹出该行数据的详细信息。此外，还可以通过设置 `size` 属性来改变弹窗大小，也可以通过设置 `content` 属性来实现自定义的弹窗内容。 总之，element-ui 表格弹窗是 element-ui 组件库中非常实用的一个组件，可以提高数据展示的效率，让用户更加方便快捷地查看和操作数据。在实际开发中，我们可以根据实际情况灵活使用该组件，提高项目的开发效率和用户体验。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值