element-ui Dialog组件弹出框的bug

1,711 阅读1分钟

由于遮罩层的出现,导致页面的滚动条隐藏,从而使页面出现闪动的效果。

这个问题是由于我们主管,强迫症。

我们写的是web端管理平台,表格的内容多,右侧就会出现滚动条,点击操作的时候,弹出框出现后,滚动条就会消失,然后页面就会动,他就觉得难受。

然后我一搜,找到了答案,就是以下这个答案,在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组件的原型中的滚动默认关闭就好了。

el-dialog弹出框被遮盖层挡住

这个是我们页面弹出框比较多,写弹出框写的好好的,咿~怎么被遮挡住了。

在el-dialog标签里添加 :modal-append-to-body='false’

:modal-append-to-body='false'

写上之后就解决啦~

查看网上,以及element文档中。

520e9d8b0ba5d4b746bfcc821f224ef.png