在组件中使用el-dialog时，遮罩层覆盖了弹窗

问题描述：

vue项目全局引入 element-ui 后，在页面中使用el-dialog一切正常，但是在封装的的元素组件中使用，发现弹窗被遮罩层覆盖住了，且一切交互操作失效：

---

原因分析：

主要原因是z-index冲突，Element UI 的 el-dialog 组件默认会将遮罩层插入到 body 元素上，而弹窗本身可能插入在层级更深的父元素中。如果父元素的z-index 小于遮罩层的z-index，遮罩层就会覆盖住弹窗。

---

解决方案：

在el-dialog 组件上添加 modal-append-to-body="false" 属性，将遮罩层插入到弹窗的父元素中，从而使遮罩层不会覆盖到弹窗本身：

<el-dialog :visible="confirmPopVisible"
            :show-close="true"
			:modal-append-to-body="false"
  >
</el-dialog>