简介
进度条组件是展示操作的当前进度的魔笔基础组件。
配置项
分类 | 配置 | 示例 | 说明 |
内容 | 进度 |
| 进度值，数字类型 |
类型 |
| 进度条的类型，可选：条形、圆形、仪表 | |
状态 |
| 进度条的状态，可选：成功、失败、默认 | |
内容文字类型 |
| 内容文字类型，可选：数字、百分比、自定义 | |
自定义内容 |
| 自定义进度条文字内容 | |
成功进度条相关配置 |
| 在分段展示进度场景下，同时展示多个进度，此项配置为成功分段的配置 | |
标签 |
| 标签，详情参见表单通用属性 | |
交互 | 隐藏 |
| 隐藏，详情参见通用属性 |
隐藏时保留布局 |
| 隐藏时保留布局，详情参见通用属性 | |
加载 |
| 组件显示加载中动效 | |
样式 | 外边距 |
| 外边距，详情参见通用属性 |
进度条样式 |
| 进度条样式，可选：圆角、直角、平角 | |
是否显示进度数值或状态图标 |
| 是否显示进度数值或状态图标 | |
进度数值位置 |
| 进度数值显示位置，内外位置是指显示在进度色条的内部还是外部，水平位置则是与进度色条的相对水平位置 | |
步数 |
| 进度条总共步数 | |
进度条尺寸 |
| 进度条尺寸，可选：小，默认，自定义 | |
自定义高度 |
| 自定义进度色条的高度 | |
进度条高度 |
| 显示标签且标签显示在进度条上方时，标签和进度条有两种高度显示模式：小，紧凑模式；默认，宽松模式 | |
CSS样式 | 进度条默认颜色 |
| 进度条默认颜色 |
未完成进度条默认颜色 |
| 未完成进度条默认颜色 | |
圆形进度条图标大小 |
| 进度条为圆形时，设置图标大小、文字颜色、文本大小 | |
圆形进度条文字颜色 |
| ||
圆形进度条文本大小 |
| ||
条状进度条圆角 |
| 进度条类型为条状时，颜色条的圆角 |
属性与方法
名称 | 类型 | 示例 | 说明 |
percent | number |
| 当前进度条组件的进度值 |
status | string |
| 当前进度条组件的状态，可选值：success（成功）、exception（失败）、normal（默认） |
type | string |
| 只读，当前进度条组件的进度条类型，可选值：line（条型）、circle（圆型）、dashboard（仪表） |
isLoading | boolean |
| 只读，当前进度条组件是否为加载中状态 |
success | object |
| 只读，成功状态的进度条相关配置，类型为 |
setPercent | func |
| 设置当前进度条组件的进度值 |
setStatus | func |
| 设置当前进度条组件的状态 |
clearPercent | func |
| 清除组件 percent 值 |
clearStatus | func |
| 清除组件 status 值 |