Progress 组件

Progress 适合展示构建进度、任务执行状态、上传百分比和配额使用情况。

基础用法

文档构建进度72%

<Progress label="文档构建进度" :value="72" show-value />

Sizes

Small28%

Medium52%

Large84%

Colors

Default32%

Primary48%

Success76%

Warning64%

Danger91%

Indeterminate

正在同步远端资源

<Progress label="正在同步远端资源" indeterminate />

Striped

条纹进度条66%

With Label

作业检查

With Value

视频转码63%

Value Formatting

测试覆盖率83.4%

已上传文件37 / 50

Custom Styles

自定义样式58%

<Progress
  label="自定义样式"
  :value="58"
  show-value
  track-class="vp-pro-progress-demo-track"
  indicator-class="vp-pro-progress-demo-indicator"
/>

在容器组件中使用

Build92%

Deploy

Props

参数	类型	默认值	说明	示例
value	number	0	当前值。	:value="72"
min	number	0	最小值。	:min="0"
max	number	100	最大值。	:max="200"
label	string	''	左侧标签。	label="上传进度"
color	default | primary | success | warning | danger	primary	主题色。	color="success"
size	sm | md | lg	md	进度条高度。	size="lg"
indeterminate	boolean	false	不确定态，忽略数值宽度。	indeterminate
striped	boolean	false	条纹效果。	striped
showLabel	boolean	true	是否显示标签。	:show-label="false"
showValue	boolean	false	是否显示右侧数值。	show-value
format	percent | value	percent	数值格式模式。	format="value"
formatOptions	Intl.NumberFormatOptions	{}	百分比或数值格式选项。	:format-options="{ maximumFractionDigits: 1 }"
valueText	string	''	直接覆盖显示文本。	value-text="37 / 50"
trackClass	string	''	轨道附加类名。	track-class="my-track"
indicatorClass	string	''	进度条附加类名。	indicator-class="my-indicator"
labelClass	string	''	标签附加类名。	label-class="my-label"
valueClass	string	''	数值附加类名。	value-class="my-value"