elementplus 中v-loading 在滚动页面中的显示

遇到的问题

使用element的框架，当有滚动页面的时候，loading的遮罩层会随着滚动条移动

使用的代码如下所示：

当页面滚动时，如下所示：

遮罩层会随着滚动上移，非常难看。

解决方法

在窗口中添加一个div，专门负责显示loading遮罩层。

  <div id="loadingDiv"
       v-if="loadingInstance"
       :style="HOME_LOADING_DIV_STYLE"
       v-loading="loadingInstance"
       element-loading-text="正在加载模板……"
  ></div>

这个遮罩层使用loadingInstance 控制显示，css设置如下：

	#loadingDiv{
	  overflow: hidden;
	  position: absolute;
	  z-index:1000;
	  width: 100%;
	}

由CSS可知，遮罩层div是使用绝对坐标，固定在页面上，不会随着滚动而移动。
效果如下：