给假进度条fake数据的一个类库

demo预览:

https://sunzsh.github.io/vue-demos/#/fake-progress

代码:

https://github.com/sunzsh/vue-el-demo/blob/master/src/views/fake-progress.vue

分享一个类库哈,就是这个fake-progress

它可以虚拟一个:一直在增长...

但是永远到不了百分之百的

这么一个进度值

首先呢在项目里安装一下

然后呢

导进来,我这比较简单哈

直接在data里边new了一个

然后呢是自动开始的

然后在页面上呢

我们就可以fake.progress来看了

大家看一下

刷新一下

大家看他就是从 0.xxxxx 开始

但是他永远涨不到

所以呢我们要配合一些UI组件的话

就可以直接把这个值(乘100)绑定到

进度条的组件上

比方说 ElementUI 这个

el-progress我就把这个fake.progress *

然后注意一定要用parseInt

因为啊如果是99.999999几

这样如果用toFixed的话

就会变成100了

所以大家记着一定要用parseInt

我们再来看一下刷新

大家看它就一直在涨

而且呢它是越来越慢

永远也到不了百分之百

那如果我们的请求已经结束了

需要这时候需要让它完成的话

这时候也很简单

我们就直接在这

比如说写一个按钮来模拟一下啊

button 然后呢 结束

我们调用

这个 fake.end()

我们来试一下

大家看,一直在涨!然后呢我们点下 结束

它就可以了

最后更新于