elementUI在打开dialog的时,页面右侧会出现滚动条,或是页面宽度会缩小,当关闭dialog后又恢复原样,控制台检查后发现当打开dialog时,body元素会有class=el-popup-parent--hidden的类名,关闭dialog后el-popup-parent--hidden类名消失,这应该就是造成页面出现滚动条或是宽度缩小的原因,查了一下资料发现有两种解决办法
一. 重写el-popup-parent--hidden的样式
.el-popup-parent--hidden {
padding-right: 0px !important;
overflow: hidden !important;
}
二. 在main.js中添加关闭dialog滚动条配置
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
// 关闭dialog滚动条
ElementUI.Dialog.props.lockScroll.default = false