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>
    
    <div style='font-size:16px' >Loading...div>
Spin>

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

css：

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))
        }
    }

效果如下