解决element弹框组件导致页面抖动问题(代码片段)

水星记_ 水星记_     2022-12-11     478

关键词:

问题描述

问题描述图

通过上图我们可以很明显的看出来,页面会随着弹框的出现和关闭一直抖动,这是为什么呢?


原因分析:

其实发生该问题的原因非常简单,当弹框出现时,会导致页面的滚动条隐藏,然而关闭弹框时,滚动条又会重新出现,由于滚动条的隐藏和出现,也就导致了页面会抖动的问题。


解决方案:

解决该问题的方法也很简单,我们只需要在入口配置文件中加上以下代码即可全局生效。

//main.js
ElementUI.Dialog.props.lockScroll.default = false;

最终效果

解决element中message消息提示组件弹出多个弹框问题(代码片段)

前言elementUi作为前端主流ui框架之一,其中的message组件更是占据了系统提示信息中的半壁江山,但是message也有一个很明显的问题,例如当用户频繁点击按钮触发判断条件提示信息时、多个请求触发提示信息时,诸... 查看详情

解决element中dialog对话框当第一个弹框上弹出第二个的时候,页面会被遮罩层挡住(代码片段)

element嵌套dialog遮罩层的问题通过翻阅element官方api我发现在dialog组件上有这么一个属性定义了嵌套dialog的解决办法,通过将append-to-body放在第二个dialog组件上即可解决被遮罩层遮住的问题。append-to-body是boolean值,默认是fals... 查看详情

如何设置element中el-dialog弹框组件居中窗口(代码片段)

不知道大家在用el-dialog弹框组件的时候有没有遇到下面图片的情况,就是弹框中的内容比较多,那么弹框是不会垂直居中的,而是贴着窗口的最底部,显然这样看起来会非常的奇怪,其实我们可以针对于它的... 查看详情

使用element中el-table动态增减表头列的时候出现抖动闪动的问题(代码片段)

...llheight:20px!important;表头变动的时候数据可能会下掉,使用element中的dolay 查看详情

vue使用directive指令实现element中dialog等弹框组件的移动与缩放(代码片段)

前言在使用ElementUI的Dialog等弹框组件中,我们一定有这样的困扰,我们的弹框无法移动,导致下面遮罩的内容不能看到,或者我们的弹框的内容显示不完整,都会影响组件的使用体验。本小节我们通过vue的direc... 查看详情

vue—解决页面图片加载抖动的问题(代码片段)

【Vue】—解决页面图片加载抖动的问题问题如下解决办法overflow:hidden;height:0;padding-bottom:*;//其中*处填图片的高宽百分比=高/宽*100%解决之后 查看详情

element-ui中自动验证问题的解决

Element-ui中的el-form组件自带了验证功能,方便了我们的开发。然而,在开发中经常会遇到一些莫名其妙的问题,比如表单一出来就触发了验证、验证提示出现英文等等。通过查看源代码的方式,我终于找到了问题的根源,也有了... 查看详情

element-ui组件扩展-dialog嵌套问题

参考技术A用element-ui(1.x)做后台应用的时候,有时候,一个弹框(dialog)中可能需要打开新的弹框,也就是嵌套,但是element-ui的dialog组件嵌套会有问题。解决方法:写个扩展组件,嵌套的时候,可以让里面的dialog跑到body下面去。... 查看详情

解决滚动条加载出现的页面抖动(代码片段)

...动条的页面跳转到没有滚动条的页面会发生页面抖动2、解决方法一:用overflow-y:scorll显性的设置右边提供滚动机制实现css代码:htmloverflow-y:scroll;overflow-x:hidden;;缺点:不论屏幕是否需要滚动条,滚动条都会显示;3、解决方法二... 查看详情

this.$confirm不能使用为:undefined,messagebox解决全局注册导致打开页面会自动弹出的情况(代码片段)

使用了MessageBox为什么首页就会弹出一次vue按需引入element-ui的MessageBox或者Message默认弹出消息框的问题解决代码描述:importMessageBoxfrom'element-ui';Vue.use(MessageBox);Vue.prototype.$msgbox=MessageBox;导致一进入页面,就会出现... 查看详情

elementui弹出组件的遮罩层以及多层遮罩解决办法

参考技术Aelementui弹出组件的遮罩层以及多层遮罩解决办法做项目中遇到两次弹出框遮罩层的问题。有嵌套的弹出框。表单是一层弹框,然后图片放大是一层弹框,两层弹框同时出现就会出现下面问题问题前Dialog对话框https://elemen... 查看详情

关于vue+element-ui项目分页刷新不停留在当前页码bug解决

...入v-if="pagination.total!=0是为了防止,取得总条数total之前,element-ui的分页组件先行在页面加载完毕,导致total初始化默认为0,当总条数为0的时候,分页组件的页码默认为1。并且当total在created生命周期里正确取到数据后,分页组件... 查看详情

element-ui的el-select组件使用记录:将el-select放到el-table中页面不更新问题的解决方案(代码片段)

本文主要记录多选操作Element-ui官网参考一、像下面这样直接使用,页面选择下拉列表数据,页面时不会更新的<!--表格区开始--><el-tablesize="mini":data="tableData"style="width:98%"><el-table-col 查看详情

element-ui的el-select组件使用记录:将el-select放到el-table中页面不更新问题的解决方案(代码片段)

本文主要记录多选操作Element-ui官网参考一、像下面这样直接使用,页面选择下拉列表数据,页面时不会更新的<!--表格区开始--><el-tablesize="mini":data="tableData"style="width:98%"><el-table-col 查看详情

vue中解决路由切换,页面不更新的实用方法(代码片段)

...的value值并没有随着路由的改变而改变。并没有更新二、解决方案①给<router-view:key="key"&g 查看详情

解决element标签组件切换echarts图表宽高丢失问题(代码片段)

问题描述html代码<el-tab-panelabel="标签一"name="first"><divclass="chartBox"><divid="pillarsChart":style="width:'100%',height:' 查看详情

eltable滚动文字抖动

...body的width不停被设置导致表格抖动,当未设定列表宽时,element有做自动检测适应。这造成了一种情况,即上下滚动条的出现时,触发宽度,使得上下滚动条消失、再次触发宽度变换,然后如此循环和页面出现重绘、v-for的key属性... 查看详情

2021-08-13解决element-uiresetfields无效的问题

参考技术A通常情况下,我们在制作后台管理页面的时候经常会遇到以下操作“新增、编辑”等等操作,那么在编辑的时候我们通常会取到当前行的数据而进行赋值操作这个时候我们关掉弹框再去打开“新增”这个时候你会发现... 查看详情