diff --git a/packages/core/useProgress/index.ts b/packages/core/useProgress/index.ts index 7e9c0fd..ba8bf32 100644 --- a/packages/core/useProgress/index.ts +++ b/packages/core/useProgress/index.ts @@ -5,6 +5,15 @@ export interface UseProgressOptions { initialValue?: number // 0 maxValue?: number // default 100 onChange?: (currentValue: number) => void + autoIncrementRules?: AutoIncrementRule[] +} + +const DEFAULT_AUTO_INCREMENT_DELAY = 1000 + +interface AutoIncrementRule { + before: number // 多少进度之前 + increment: number // 自动增长幅度,默认 1 + delay: number // 延迟多久 } /** @@ -14,17 +23,54 @@ export interface UseProgressOptions { * 7. 提供onChange option,当进度变化时,会将进度返回,开发者可以通过这个callback做其他额外处理 */ export const useProgress = (options: UseProgressOptions) => { - const { initialValue = 0, maxValue = 100, onChange } = options + const { + initialValue = 0, + maxValue = 100, + autoIncrementRules = [], + onChange, + } = options const progress = ref(initialValue) const setProgress = (value: number) => { progress.value = Math.min(maxValue, Math.max(0, value)) } + const increment = (value: number) => { + progress.value += value + } + + const decrement = (value: number) => { + progress.value -= value + } + const reset = () => { progress.value = initialValue } + const matchRule = () => + autoIncrementRules.find((rule) => progress.value <= rule.before) ?? + autoIncrementRules[autoIncrementRules.length - 1] + + const delay = computed(() => { + const rule = matchRule() + if (rule) { + return rule.delay + } + return DEFAULT_AUTO_INCREMENT_DELAY + }) + + const timer = ref() + + const startAutoIncrement = () => { + timer.value = setTimeout(() => { + if (timer.value) { + clearTimeout(timer.value) + } + const rule = matchRule() + increment(rule.increment) + }, delay.value) + } + watch(progress, (newValue) => { if (onChange) { onChange(newValue) @@ -36,8 +82,11 @@ export const useProgress = (options: UseProgressOptions) => { return { progress, setProgress, + increment, + decrement, isComplete, reset, + startAutoIncrement, } }