问题:

在使用element-ui的el-dialog时,由于遮罩层的出现,导致页面的滚动条隐藏,从而使页面出现闪动的效果。

解决过程

当遇到这个问题时,我想能不能是滚动条悬浮于页面上,及脱离文本流,从而不影响页面的宽度,于是我百度时发现了这个css属性,及在body或者盒子上添加

body:{
	overflow:overlay
}

这个可以使页面滚动条的隐藏和显示影响页面的宽度,但是这个问题存在兼容性问题,且是一个被‘废弃’的属性,于是我就放弃了这个想法。
于是我继续翻看element-ui的文档,发现el-dialog中有一个属性,scroll-lock,我尝试将scroll-lock设置为false,果然,能行,且没有兼容性问题,但是我现在不可能一个个项目中的dialog中添加
scroll-lock=false,于是我就把这段代码放在main.js里修改默认值

import ElementUI from 'element-ui';
ElementUI.Dialog.props.lockScroll.default = false;

这下全局都会发生改变,闪动问题解决,但这只是个折中的方案,如果有更好的欢迎在评论区中提出

GitHub 加速计划 / eleme / element
15
3
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45 1 年前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 1 年前
Logo

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。

更多推荐