fake progress假进度条实现(vue3)

最近一个项目中要实现上传下载显示进度条，但是不想做，想着搞一个假的算了。于是就用到了fake progress这个库，它可以给咱一个一直在增长但是永远到不了100%的值。

首先安装一下

npm install fake-progress

然后引入，使用

<script setup lang="ts">
import FakeProgress from 'fake-progress'


const fake = reactive(new FakeProgress({
  timeConstant: 6000,  //timeConstant相当于分母，分母越大则加的越少
  autoStart: true //自动开始
}))



const customRequest = () => {
  fake.progress = 0 //每次先归零
  fake.start() //咱们手动开始
  setTimeout(() => {
    fake.end()  //简单模拟一下拿取数据成功。调用.end后进度会直接到100%
  }, 4000);
}

</script>


<template>
  <div>
    <a-progress :percent="parseInt(fake.progress*100)" />
  </div>
</template>

其实很简单，只是之前看其他文章，都是vu2，没有用reactive，页面进度一直没更新。用上reactive就正常了。当然用ref也是可以的，只要记得.value。