yypkg 工具函数 ProgressController 进度控制器 - 文章教程

yypkg 工具函数 ProgressController 进度控制器

发布于 2021-09-16 字数 3458 浏览 933 评论 0

进度控制器,更灵活可控的进度百分比控制,模拟逼真的web资源加载进度

使用

import ProgressController from 'yypkg/progress-controller'

// 初始配置
let config = {
  from: 0,
  to: 100,
  increment: 1,
  rate: 100,
}
let stepOption = {
  step1: {
    progress: 85,
    rate: [100, 120], // 在100-120ms之间随机更新频率
  },
  step2: {
    progress: 92,
    rate: [800, 1200],
  }
}
let progress = new ProgressController(config)

// 进度阶段1
progress.go(stepOption.step1, ()=>{

  // 进度阶段2
  progress.add(stepOption.step2)
})

// 设置进度到100%
progress.complete(()=>{
  console.log('加载完毕')
})

// 进度加载事件
progress.$on('process', (currentProgress)=>{
  console.log(`当前进度是${currentProgress}`)
})

配置项

参数名 描述 类型 默认值
from 设置进度起始位置 Number 或 Array,数组时表示区间内随机某个值 0
to 设置进度结束位置 Number 或 Array,数组时表示区间内随机某个值 100
increment 每次更新的递增量 Number 或 Array,数组时表示区间内随机某个值 1
rate 更新频率,即多久更新一次,单位ms Number 或 Array,数组时表示区间内随机某个值 100

方法

方法名 描述 参数
go 设置进度去到某个值 option:Object
option.progress: 进度值,Number 或 Array
option.increment: 递增量,Number 或 Array
option.rate: 频率,Number 或 Array
callback: 回调函数,返回当前进度值
add 在当前时刻基础上增加进度去到某个值 option:Object
option.progress: 进度值,Number 或 Array
option.increment: 递增量,Number 或 Array
option.rate: 频率,Number 或 Array
callback: 回调函数,返回当前进度值
complete 设置进去去到100%,也可用goadd实现 callback: 回调函数,返回当前进度值
reset 重置进度 callback: 回调函数,返回当前进度值
destroy 销毁进度对象 callback: 回调函数
$on 事件监听方法 eventName: 事件名称,String,见下表
callback: 回调函数

事件

事件用$on方法调用,callback回调函数返回当前进度值

事件名 描述 回调函数参数
process 进度进行过程中 currentProgress:当前进度值
complete 进度完成到100% currentProgress:当前进度值
beforeDestroy 销毁之前 currentProgress:当前进度值
destroyed 销毁之后

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2512 文章
30 评论
83581 人气
更多

推荐作者

魏剑帆

文章 0 评论 0

yanggwq

文章 0 评论 0

qq_c2gI5

文章 0 评论 0

qq_iQVWB

文章 0 评论 0