当页面加载时，假如数据没有加载完成，此时为了防止用户进行操作，会显示一个遮罩并显示一个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)) } }效果如下
