需求:在发送数据请求的时候,总会有一两秒的时间让我们等待,这时候会出现空白,给用户体验感不好,因此就需要一个等待加载的符号出现,提示用户,正在加载数据中
在子组件发送请求数据接口之前向父组件传递一个值为true,表示数据正在加载中,发送完接口之后再向父组件发送一个值为false,表示数据加载完毕
子组件:
//请求接口
requestTime(time) {
if(time.length === 0) return;
//发送请求数据接口之前向父组件传递一个值为true
this.$emit("isLoading", true);
if(myChart) {
myChart.clear();
}
//开始时间
let startTime = time[0] == "" ? null : time[0];
//结束时间
let endTime = time[1] == "" ? null : time[1];
api
.getDefectsByTimes({
startTime: startTime,
endTime: endTime,
})
.then((res) => {
this.totalEcharts = res.content;
let objectArr = res.content;
})
.catch((err) => {
console.log(err);
}).finally(() => {
//发送完接口之后再向父组件发送一个值为false
this.$emit("isLoading", false);
})
},
父组件:
<router-view
:times='times'
:buttonId="buttonId"
//接收子组件发送来的isLoading
:isLoading='isLoading'
@isLoading="(value) => (isLoading = value)"
/>
父组件通过子组件传来的isLoading进行判断是否显示
<Loading v-if="isLoading" />
正在加载组件的代码
<template>
<div class="loading">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</template>
<script>
export default {
name: 'Loading'
}
</script>
<style scoped>
.loading{
width: 150px;
height: 15px;
margin: 0 auto;
margin-top:100px;
}
.loading span{
display: inline-block;
width: 15px;
height: 100%;
margin-right: 5px;
background: #0866da;
-webkit-transform-origin: right bottom;
-webkit-animation: load 1s ease infinite;
}
.loading span:last-child{
margin-right: 0px;
}
@-webkit-keyframes load{
0%{
opacity: 1;
-webkit-transform: scale(1);
}
100%{
opacity: 0;
-webkit-transform: rotate(90deg) scale(.3);
}
}
.loading span:nth-child(1){
-webkit-animation-delay:0.13s;
}
.loading span:nth-child(2){
-webkit-animation-delay:0.26s;
}
.loading span:nth-child(3){
-webkit-animation-delay:0.39s;
}
.loading span:nth-child(4){
-webkit-animation-delay:0.52s;
}
.loading span:nth-child(5){
-webkit-animation-delay:0.65s;
}
</style>