进度条
介绍
给予用户当前系统执行中任务运行状态的反馈,多用于运行一段时间的场景,有效减轻用户在等待中产生的焦虑感。
API
Props
| 参数名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| status | 状态 | 'default' | 'hide' | 'default' |
| type | 进度条类型 | 'line'|'circle' | 'line' |
| size | 进度条大小 | 'mini'|'small'|'medium'|'large' | 'medium' |
| progressStatus | 进度条状态 | 'none'|'normal'|'success'|'warning'|'danger' | 'none' |
| data | 进度百分比 | number | 0 |
| showSteps | 启用步骤条模式 | boolean | false |
| steps | 步骤数 | number | 0 |
| showText | 是否显示进度文字 | boolean | true |
| baseStyle | 自定义样式 | string | - |
| customClass | 类名绑定 , 绑定类的名称 | string | - |
| strokeWidth | 进度条粗细 | StrokeWidth | - |
| width | 长度 | Width | - |
| color | 进度条颜色 | String | - |
| trackColor | 轨道颜色 | String | #E5E5E5 |
| uniqueKey | 唯一标识 , 组件的唯一标识 | string | - |
| customText | 自定义进度文字,渲染函数返回 jsx 语法,用户自定义渲染内容 | Function | - |
| loop | 循环 , 循环渲染设置 | Loop | - |
Type
js
// 进度条粗细
type StrokeWidth = {
"value":string
"unit":"px"
}
// 长度
type Width = {
"value":string
"unit":"px"|"%"
}
// 循环
type Loop = {
"data": any[],
"paramName": string,
"indexName": string,
"key": string
}