Progress 进度条

用于展示操作的当前进度。

引入

通过 easycom 自动引入，无需手动注册。

代码演示

基础用法

通过 percentage 属性设置当前进度。

<zq-progress :percentage="50" />

自定义线宽

通过 stroke-width 属性设置进度条粗细，单位 rpx。

<zq-progress :percentage="50" :stroke-width="12" />

自定义颜色

通过 color 属性自定义进度条颜色。

<zq-progress :percentage="50" color="#07c160" />
<zq-progress :percentage="70" color="#ee0a24" />

自定义轨道颜色

通过 track-color 属性自定义轨道颜色。

<zq-progress :percentage="50" track-color="#e8e8e8" />

隐藏百分比文字

通过 :show-pivot="false" 隐藏百分比文字。

<zq-progress :percentage="50" :show-pivot="false" />

自定义文字

通过 pivot-text 属性自定义右侧文字。

<zq-progress :percentage="50" pivot-text="已完成一半" />

自定义文字颜色

通过 pivot-color 属性自定义文字颜色。

<zq-progress :percentage="50" pivot-color="#ee0a24" />

置灰状态

通过 inactive 属性设置为置灰状态。

<zq-progress :percentage="50" inactive />

API

Props

参数	说明	类型	默认值
percentage	进度百分比（0-100）	number	0
stroke-width	进度条粗细，单位 rpx	number	8
color	进度条颜色	string	''（默认使用 --color-primary）
track-color	轨道颜色	string	''（默认使用 --color-bg-input）
show-pivot	是否显示百分比文字	boolean	true
pivot-text	自定义文字内容	string	''（默认显示 {percentage}%）
pivot-color	文字颜色	string	''
inactive	是否置灰	boolean	false

注意事项

• percentage 会自动限制在 0-100 范围内。
• 进度条宽度变化有 0.3s 的过渡动画。

主题定制

变量名	说明
--color-primary	默认进度条颜色/文字颜色
--color-bg-input	默认轨道颜色
--color-text-disabled	置灰状态颜色