Vue el-dialog遮罩层在对话框上面【解决办法】

今天爱分享给大家带来Vue el-dialog遮罩层在对话框上面【解决办法】,希望能够帮助到大家。

原因:若el-dialog弹出框设置了modal-append-to-body=’true’(默认)属性,它的遮罩层就会被插入到body标签下(即与组件所在的最外层div同一层级)。经过分析源代码可得,el-dialog的显示层和遮罩层都设置了position:fixed,当然显示层的z-index肯定要比遮罩层的大,才能正常的显示弹出框。问题就出在此处,若el-dialog的父级也设置了position:fixed,并且其z-index比弹出框的遮罩层的小(遮罩层处于更高一层),那么弹出框的内容就会被遮罩层所遮挡住了。

解决方案:给el-dialog设置modal-append-to-body=“false”,使遮罩层插入至 Dialog 的父元素上。

人已赞赏
前端

Vue Missing required prop: “index”【解决办法】

2020-11-8 18:46:46

前端

Vue Scripts may close only the windows that were opened by it【解决办法】

2020-11-8 18:48:27

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
'); })();