Progress 进度条
用于展示操作的当前进度，告知用户当前状态和预期。
线性进度条
百分比内显
在这种情况下，百分比显示在进度条内部，不占用额外空间。
自定义颜色
您可以使用 color 属性来设置进度条的颜色。它接受颜色字符串、函数或数组。
环形进度条
仪表盘样式的进度条
你同样可以指定 type 属性到 dashboard 来使用仪表盘样式的进度条。
自定义内容
不确定进度的进度条
带条纹的进度条
API
属性
| 名称 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| percentage 百分比 必填 | 百分比 | number | 0 |
| type | 进度条类型 | 枚举 | line |
| stroke-width | 进度条的宽度 | number | 6 |
| text-inside | 进度条显示文字内置在进度条内（只在 type=line 时可用） | boolean | false |
| status | 进度条当前状态 | 枚举 | — |
| indeterminate | 设置不确定状态的进度条 | boolean | false |
| duration | 控制不确定进度或条纹流动进度的动画持续时间 | number | 3 |
| color | 进度条背景色。会覆盖 status 属性 | string / function / Array | '' |
| width | 环形进度条画布宽度 | number | 126 |
| show-text | 是否显示进度条文字内容 | boolean | true |
| stroke-linecap | circle/dashboard 类型路径结束时的形状 | 枚举 | 圆角 |
| format | 自定义文本格式 | Function | — |
| striped 2.3.4 | 进度条颜色上覆盖条纹 | boolean | false |
| striped-flow 2.3.4 | 让条纹流动起来 | boolean | false |
插槽
| 名称 | 描述 | 类型 |
|---|---|---|
| default | 自定义内容 | object |
来源
贡献者
