vue做一个一直自增加载且永远不会超过百分之九十九的数值制造正在加载假象

news2024/11/24 20:09:07

我们在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>