element 局部loading长页面如何处理

项目场景：

element UI 利用指令loading制作局部loading。

---

问题描述：

需要制作局部loading的页面很长，loading 时可以向下滚动，导致遮罩层遮挡不了页面的下半部分。

---

解决方案：

在loading时利用overflow: hidden;禁止页面滚动。loading属性为true即页面正在加载中时，给页面绑定banScroll样式。
html：

<template>
  <div 
    class="earn" 
    :class="{ banScroll: loading === true }"
    v-loading="loading"
    element-loading-text="加载中..."
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(255, 255, 255, 0.7)"
  >
</template>

css：

<style lang="less" scoped>
  .earn {
    width: 100%;
    height: 100%; 
    overflow: auto;
    //回测进行中禁止页面滚动
    &.banScroll {
      overflow: hidden;
    }
}
</style>