diff --git a/.eslintignore b/.eslintignore index a49e6e7..ff1d65a 100644 --- a/.eslintignore +++ b/.eslintignore @@ -3,4 +3,4 @@ node_modules dist .eslint* -README.md \ No newline at end of file +**/*.md \ No newline at end of file diff --git a/packages/core/useProgress/README.zh-CN.md b/packages/core/useProgress/README.zh-CN.md index 597c04c..8175ee4 100644 --- a/packages/core/useProgress/README.zh-CN.md +++ b/packages/core/useProgress/README.zh-CN.md @@ -1,12 +1,149 @@ # useProgress -进度管理工具 -支持 - -1. 计算百分比 0...100 -2. 提供update方法更新进度 -3. 提供step能力,可以动态管理进度,但最终的finish需要明确告知 -4. 提供finish方法,允许开发者告知是否完成 -5. 提供状态isProgress开发者可以根据这个值判断boolean -6. 提供进度条描述文案 [{ value: 10, text: '111'}, { value: 20, text: '222' }] -7. 提供onChange option,当进度变化时,会将进度返回,开发者可以通过这个callback做其他额外处理 +## 用法 + +### 基础用法 + +```ts + +``` + +```html + +``` + +### 自定义初始值 + +```ts + +``` + +```html + +``` + +### 设置最大值 + +```ts + +``` + +```html + +``` + +### 判断进度条是否完成 + +```ts + +``` + +```html + +``` + +### 监听进度变化 + +```ts + +``` + +```html + +``` + +### 自动增长进度 + +```ts + +``` + +```html + +``` + +## 类型定义 + +### UseProgressOptions + +| 名称 | 类型 | 默认值 | 是否必传 | 说明 | +| ------------------ | ------------------------------------------- | ------ | -------- | ---------------------- | +| initialValue | _number_ | 0 | [ ] | 初始进度值 | +| maxValue | _number_ | 100 | [ ] | 最大进度值 | +| onChange | _(currentValue: number) => void_ | - | [ ] | 当进度变化时都回调函数 | +| autoIncrementRules | [_AutoIncrementRule[]_](#autoincrementrule) | [] | [ ] | 自动增长进度规则 | + +### AutoIncrementRule + +| 名称 | 类型 | 默认值 | 是否必传 | 说明 | +| --------- | -------- | ------ | -------- | -------------------------------- | +| before | _number_ | - | [x] | 在进度值到达 _before_ 之前的规则 | +| increment | _number_ | - | [x] | 每次自动增长进度值 | +| delay | _number_ | - | [x] | 每次自动增长间隔时间 | + +### UseProgressReturn + +| 名称 | 类型 | 说明 | +| ------------------ | ----------------------------- | ---------------- | +| progress | _ComputedRef\_ | 当前进度百分比 | +| increment | _(value: number = 1) => void_ | 增加进度 | +| decrement | _(value: number = 1) => void_ | 减少进度 | +| isComplete | _ComputedRef\_ | 是否完成 | +| reset | _() => void_ | 重置进度 | +| startAutoIncrement | _() => void_ | 开始自动增长进度 | diff --git a/packages/core/useProgress/index.ts b/packages/core/useProgress/index.ts index edae743..0302e87 100644 --- a/packages/core/useProgress/index.ts +++ b/packages/core/useProgress/index.ts @@ -8,7 +8,7 @@ export interface UseProgressOptions { autoIncrementRules?: AutoIncrementRule[] } -interface AutoIncrementRule { +export interface AutoIncrementRule { before: number // 多少进度之前 increment: number // 自动增长幅度,默认 1 delay: number // 延迟多久 diff --git a/src/demo/UseProgress.vue b/src/demo/UseProgress.vue index 8be3464..c46f497 100644 --- a/src/demo/UseProgress.vue +++ b/src/demo/UseProgress.vue @@ -2,28 +2,26 @@ import { ref } from 'vue' import { useProgress } from '@noi/core' -const { progress, increment, startAutoIncrement } = useProgress({ - maxValue: 19000, +const { progress, increment, startAutoIncrement, isComplete } = useProgress({ + maxValue: 1000, autoIncrementRules: [ { before: 30, delay: 100, increment: 2 }, { before: 50, delay: 500, increment: 1 }, { before: 70, delay: 300, increment: 3 }, ], + onChange(progress) { + console.log(progress) + }, }) - -/** - * 3. 提供step能力,可以动态管理进度,但最终的finish需要明确告知 - * 6. 提供进度条描述文案 [{ value: 10, text: '111'}, { value: 20, text: '222' }] - * 7. 提供onChange option,当进度变化时,会将进度返回,开发者可以通过这个callback做其他额外处理 - */