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

这篇具有很好参考价值的文章主要介绍了vue做一个一直自增加载且永远不会超过百分之九十九的数值制造正在加载假象。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

我们在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作为回调函数的参数
vue做一个一直自增加载且永远不会超过百分之九十九的数值制造正在加载假象
这样我们页面上的值就一直在加且用于不会超过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>