ElementUI Dialog打开时出现遮罩层

Posted 2022-03-25 长不大的大灰狼

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

说明：
z-index 属性：设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。