Progress 进度条

用于展示任务进度，支持线形、环形和仪表盘样式，可配置状态、线宽、颜色和文字展示方式。

示例

基础用法

进度状态

自定义文字和颜色

API

Props

属性名	说明	类型	默认值
type	进度条类型	'line' | 'circle' | 'dashboard'	'line'
percentage	进度百分比，范围 0-100	number	0
status	当前状态	'default' | 'success' | 'exception' | 'warning'	'default'
stroke-width	进度条宽度	number	6
show-text	是否显示文字	boolean	true
text-inside	文字是否内置在线形进度条内	boolean	false
width	环形/仪表盘画布宽度	number	126
stroke-linecap	路径两端形状	SVGAttributes['stroke-linecap']	'round'
color	自定义进度条颜色，会覆盖 status 状态颜色	string	''

Events

该组件无自定义事件。

Slots

插槽名	说明	作用域参数
default	自定义进度文字	{ percentage: number }

注意事项

• 默认文字内容为当前百分比，例如 50%。
• text-inside 仅在线形进度条中生效。
• color 支持普通颜色值和包含 gradient 的渐变背景值。
• circle 与 dashboard 会根据 width 和 stroke-width 计算 SVG 路径宽度。
• percentage 应保持在 0 到 100 之间。
• 表示成功、异常或警告时优先使用 status，保持语义清晰。