position:fixed导致子元素本该显示的el-dialog弹框被遮罩层覆盖的解决办法
最近vue项目中为了使header与sidebar部分固定不动,只有main主体部分内容滚动,于是给main部分加上了固定定位position:fixed,overhidden:scroll.app-main {height: 100%;position: fixed;overflow: scroll;}导致main主体部分子元素dialog弹出框被遮罩覆盖的...
·
最近vue项目中为了使header与sidebar部分固定不动,只有main主体部分内容滚动,于是给main部分加上了如下css
.app-main {
height: 100%;
position: fixed;
overflow: scroll;
}
导致main主体部分子元素dialog弹出框被遮罩覆盖的问题,如下图
解决办法:父元素设置成固定定位时,子元素弹出框设置:modal-append-to-body='false’即可
<el-dialog
title="新增客户信息"
:visible.sync="addDialogVisible"
width="50%"
@close="addformClosed"
:modal-append-to-body='false'
>
<!-- 表单 -->
<el-form ref="addformRef" :model="addform" :rules="addFormRules">
.....
</el-form>
</el-dialog>
解决后
若el-dialog弹出框设置了modal-append-to-body=‘true’(默认)属性,它的遮罩层就会被插入到body标签下(即与组件所在的最外层div同一层级),知道这个原理就好办了
找了很多篇解决方案,只有这一篇解决了我的问题,这一篇写的很好
添加链接描述
更多推荐
已为社区贡献8条内容
所有评论(0)