页面加载过程 loading加载特效

.vue文件在查询框增加一个查询加载特效 分别需要在html、css、js中增加相应代码

1. 首先在html中定义一个spin-box，用 v-if函数来判断是否需要加载动画

 <div class="spin-box" v-if="loading">
            <a-spin tip="数据加载中...">
              <a-icon
                slot="indicator"
                type="loading"
                style="font-size: 0.24rem"
                spin
              />
            </a-spin>
          </div>

然后在下一行代码最后加入v-else来判断加载动画是否终止。

2. 在js中进行编辑
   首先在data函数设置

 data() {
    return {
      loading: false,//默认不显示loading
      }；
  }

在async函数中设置

async getList(queryObj) {
      this.loading = true;
      try {...
      } catch (e) {
        this.loading = false;
        console.log("e");
        console.log(e);
      }
    },

dealEcharts(dataList) {
    this.loading = false;
 }

3. css中进行格式修改

.spin-box {
    position: absolute;
    top: 0.5rem;
    left: 0;
    width: 100%;
    height: 90%;
    background: rgba(137, 137, 137, 0.3);

    .ant-spin {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
  }