Vue + iview Spin 实现loading加载环

场景

当页面加载时，假如数据没有加载完成，此时为了防止用户进行操作，会显示一个遮罩并显示一个loading环，提示用户加载中…

实现

html:

<Spin fix v-show="this.$store.state.isSpinShow">
    <div class="demo-spin-icon-load">
      <!-- 这里用的是阿里图标库 -->
      <i class="iconfont icon-loader--line"></i>
    </div>
    <!-- <Icon type="load-c" size="30" class="demo-spin-icon-load"></Icon> -->
    <div style='font-size:16px' >Loading...</div>
</Spin>

<FormItem>
   <Button type="primary" @click="filterBtn('form')">筛选</Button>
</FormItem>

css：

<style scoped>
    /* 旋转效果 */
    .demo-spin-icon-load{
    
    
        animation: ani-demo-spin 1s linear infinite;
    }
    @keyframes ani-demo-spin {
    
    
      from {
    
     transform: rotate(0deg);}
      50% {
    
     transform: rotate(180deg);}
      to {
    
     transform: rotate(360deg);}
    }
    /* 遮罩 */
    /* 假如内容过长，一屏放不下，滚动条下拉覆盖不全 */
    .ivu-spin-fix {
    
    
        position: absolute;
        top:0;
        left: 0;
        z-index: 8;
        width: 100%;
        height:100%;
        background-color: hsla(0,0%,100%,.8);
    }
</style>

js：
store中全局管理isSpinShow这个属性，方便组件间通信

    methods: {
    
    
        filterBtn (name) {
    
    
          this.$refs[name].validate((valid) => {
    
    
            if (valid) {
    
    
              this.$store.state.isSpinShow = true   //发送请求成功后显示loading并遮罩
              this.$store.state.chartForm = this.requestData()         
              this.$Message.success(
                {
    
    
                  content:'发送请求成功!',
                  duration:3,
                }
              );
            } else {
    
    
              this.$Message.error('请求失败，请检查是否完整填写表单!');
            }
         })
       }
   }

lineChart.vue中收到后端返回的数据（无论是正常数据，还是空数据还是超时数据）之后终止loading，也就是重新将this.$store.state.isSpinShow置为false

methods: {
    
    
        getData(){
    
    
          this.axios.post('/api/search/getgraph/predict/linechart', JSON.stringify(this.form),
              {
    
    headers:{
    
    'Content-Type':'application/json;charset=UTF-8'}}).then(result => {
    
    
            .......
            /*处理接口渲染数据的一系列操作*/
         	.......
              this.flag = true
              this.$Message.success(
                {
    
    
                  content:'预测曲线更新完成',
                  duration: 8,
                  closable: true
                }
              );
              this.$store.state.isSpinShow = false    //终止loading
              this.myChart.clear()
              this.init()
            } else if(result.data.code === 200 && result.data.data.coordinate.length === 1){
    
    
              this.$Message.info({
    
    
                content: '此时间段内无数据，请重新选择',
                top:100,
                duration: 8,
                closable: true
              });
              this.$store.state.isSpinShow = false   //终止loading
              this.myChart.clear()
              this.init()
            }else if(result.data.data === null){
    
    
              this.flag = false
              this.$Message.error({
    
    
                content: '预测模块超时，请联系预测人员',
                duration: 8,
                closable: true
              });
              this.$store.state.isSpinShow = false   //终止loading
            }
          }).catch((error) => console.log(error))
        }
    }

效果如下