【UI】 elementui的dialog弹窗打开时CSS的BUG | 滚动条消失bug

简介: 【UI】 elementui的dialog弹窗打开时CSS的BUG | 滚动条消失bug

问题

问题描述:el-dialog弹窗没打开时,页面有滚动条,会占据浏览器右侧15px左右的宽度。

dialog打开之后,遮罩层占整个浏览器的宽度,且没有滚动条。网页头部滚动条消失,导致网页头

部向右移动15px左右。每次打开dialog网页头部就向右移动;关闭dialog网页头部就向左移动。直接影响美观。由于遮罩层的出现,导致页面的滚动条隐藏,从而使页面出现闪动的效果。

解决

在main.js中写上就好了。

// 引入element组件
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
// 弹出框的时候滚动条隐藏和出现导致页面抖动问题
ElementUI.Dialog.props.lockScroll.default = false;
Vue.use(ElementUI)


main.js中设置:给element-ui中的Dialog组件的原型中的滚动默认关闭就好了。

下班~

目录
相关文章
|
24天前
|
Web App开发 前端开发 iOS开发
如何使用CSS样式化滚动条
如何使用CSS样式化滚动条
15 0
|
2月前
|
JavaScript
【UI】 elementUI的select-tree组合下拉框,选择后下拉框不收起
【UI】 elementUI的select-tree组合下拉框,选择后下拉框不收起
101 1
|
2月前
element UI【解决方案】消息弹框被对话框遮挡($message消息框被dialog或$alert遮罩)
element UI【解决方案】消息弹框被对话框遮挡($message消息框被dialog或$alert遮罩)
73 3
|
2月前
|
前端开发
css 实用技巧 —— 永远居中的弹窗
css 实用技巧 —— 永远居中的弹窗
16 2
|
2月前
【UI】elementui el-pagination分页位置靠右
【UI】elementui el-pagination分页位置靠右
37 0
|
2月前
|
前端开发 JavaScript
vue 自定义气泡弹窗 $pop (内含css晃动动画shake制作)
vue 自定义气泡弹窗 $pop (内含css晃动动画shake制作)
30 0
|
4月前
|
前端开发 搜索推荐 开发者
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
|
4月前
|
JavaScript 前端开发 开发者
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
|
4月前
|
前端开发 JavaScript API
SAP UI5 sap.ui.require.toUrl 的作用介绍
SAP UI5 sap.ui.require.toUrl 的作用介绍
|
4月前
|
JSON 前端开发 测试技术
SAP UI5 sap.ui.core.util.MockServer.simulate 方法介绍
SAP UI5 sap.ui.core.util.MockServer.simulate 方法介绍
下一篇
DDNS