Progress 进度条

进度条用于展示操作进度，支持语义配色与自定义颜色、内置或外置的进度文字，并可调整线条粗细、轨道背景色与过渡动画时长。

小程序	APP	Web
✓	✓	✓

实例

以下按属性分别说明 mu-progress 的用法，可按需组合。

<template>
  <mu-progress :percentage="40" :show-text="true"></mu-progress>
</template>

类型配色

设置进度条颜色，可选内置语义色 primary、success、warning、error、danger、info。

<mu-progress :percentage="60" type="primary"></mu-progress>
<mu-progress :percentage="60" type="success"></mu-progress>
<mu-progress :percentage="60" type="warning"></mu-progress>
<mu-progress :percentage="60" type="error"></mu-progress>
<mu-progress :percentage="60" type="danger"></mu-progress>
<mu-progress :percentage="60" type="info"></mu-progress>

自定义颜色

type 传入内置语义色以外的值时，会作为颜色值使用。

<mu-progress :percentage="60" type="#8B5CF6"></mu-progress>

进度文字

控制是否在进度条右侧显示进度文字。

<mu-progress :percentage="60" :show-text="true" type="primary"></mu-progress>

文字内置

开启后进度文字显示在进度条内部，需配合 show-text 使用。

<mu-progress :percentage="60" :show-text="true" :text-inside="true" :stroke-width="32" type="primary"></mu-progress>
<mu-progress :percentage="80" :show-text="true" :text-inside="true" :stroke-width="32" type="success"></mu-progress>

粗细

设置进度条的粗细，单位为 rpx。

<mu-progress :percentage="30" :stroke-width="6" type="success"></mu-progress>

轨道背景色

设置未填充轨道的背景色，可使用主题变量或任意合法颜色。

<mu-progress :percentage="30" :stroke-width="20" type="warning" bg-color="#F1EFFB"></mu-progress>

过渡时长

设置进度变化时的过渡动画时长，单位为毫秒。

<mu-progress :percentage="60" :duration="800" type="primary"></mu-progress>

自定义文字

通过默认插槽自定义进度文字内容，需配合 show-text 才会显示。

<mu-progress :percentage="dynamic" :show-text="true" type="success">
  <text class="custom-text">已完成 {{ dynamic }}%</text>
</mu-progress>

属性

全部属性均可选，未传入时使用默认值；默认值列为 - 表示空字符串。

属性名称	说明	类型	默认值
percentage	进度百分比，取值范围 0-100，超出范围自动截断	number	0
type	进度条颜色，可选 primary、success、warning、error、danger、info，也可直接传入颜色值	string	primary
showText	是否显示进度文字	boolean	false
textInside	文字是否内置到进度条内	boolean	false
strokeWidth	进度条粗细（rpx）	number	18
bgColor	轨道背景色	string	-
duration	进度过渡动画时长（ms）	number	300
customClass	自定义类名，附加在进度条根节点上以覆盖默认样式	string	-
customStyle	自定义行内样式，直接作用于进度条根节点	any	-

插槽

组件支持以下插槽。

名称	说明
default	自定义进度文字内容，显示于进度条右侧或内置位置

注意事项

• 平台差异：App、小程序、Web 表现一致。
• 使用注意：percentage 超出 0-100 会自动截断，进度文字按四舍五入取整。
• 使用注意：type 传内置语义色（primary、success、warning、error、danger、info）时使用内置配色，传其它值会被当作颜色值使用。
• 使用注意：自定义进度文字需放在默认插槽并配合 show-text 才会显示。