ElementUI Dialog打开时出现遮罩层

el-dialog设置遮罩层，

:modal=“true” :modal-append-to-body=“true”

在打开dialog，有遮罩时，解决方案如下：

:append-to-body="true"

自定义遮罩层：

<div v-if="showModal" class="mask">
   <img class="loading-image" src="../../image/loading.gif" alt="正在处理，请等待。。。">
 </div>
    
.mask {
	 background-color: rgb(0, 0, 0);
	 opacity: 0.3;
	 position: fixed;
	 top: 0;
	 left: 0;
	 width: 100%;
	 height: 100%;
	 z-index: 1
}

注意：

• 解决多层遮罩层覆盖的问题 :append-to-body="true"
• 解决一层遮罩层覆盖问题:modal-append-to-body="false"
• 如果dialog是嵌套的情况，可以将最外层的遮罩去掉:modal = "false"
• z-index 属性：设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

参考文章：
[1] 解决打开和关闭都有遮罩的情况