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 的父元素上。