给假进度条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()
我们来试一下
大家看,一直在涨!然后呢我们点下 结束
它就可以了
最后更新于
这有帮助吗?