我们在src跟目录下创建一个utils目录下面创建一个continuousLoading.js
参考代码如下

let value = 0;export default function(callback) {const timer = setInterval(() => {if (callback&&(value || value === 0)&&value < 99) {value += 1;callback(value);} else {clearInterval(timer);}}, 500);
}

这里这个描述甚至你也可以改成外面传进来的 我这里就直接设置 500 0.5秒执行一次了
然后每次进来判断 value 如果还小于99就继续 加一 然后回调一下传进来的函数
如果到99了 就直接clearInterval关掉定时器

然后 我们vue组件代码编写如下

<template><div>{{ value }}</div>
</template><script>
import continuousLoading from '@/utils/continuousLoading';export default {data() {return {value: 0}},created() {continuousLoading((value) => {this.value = value;});}
}
</script>

这里 主要是created中 定义了continuousLoading 我们传进去的回调就是 接受到value 然后将接到的value给 data中的响应式的value赋值
因为我们continuousLoading中写了每500后加一回调 传value作为回调函数的参数

这样 我们页面上的值就一直在加 且用于 不会超过99
做出一个正在加载的假象给用户看
甚至我们还可以配合element-ui的组件
参考代码如下

<template><div><el-progress type="circle" :percentage="value"></el-progress></div>
</template><script>
import continuousLoading from '@/utils/continuousLoading';export default {data() {return {value: 0}},created() {continuousLoading((value) => {this.value = value;});}
}
</script>

就很完美