Progress 进度条
用于展示任务或操作进度的线性条与环形圈控件,支持百分比显示、状态配色与自定义颜色。
代码示例
1. 线性进度条 (Line Progress)
vue
<template>
<mu-progress :percent="65" />
<mu-progress :percent="80" status="success" />
<mu-progress :percent="40" status="warning" />
<mu-progress :percent="20" status="error" />
</template>2. 环形进度条 (Circle Progress)
vue
<template>
<mu-progress type="circle" :percent="75" :size="120" />
</template>API 属性说明 (Props)
| 参数名 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| percent | 当前进度百分比 (0-100) | Number | 0 ~ 100 | 0 |
| type | 进度条展示类型 | String | line | circle | 'line' |
| strokeWidth | 进度条/圆环线条粗细 (rpx/px) | Number | String | - | 12 |
| activeColor | 进度条激活颜色 | String | - | '#171717' |
| bgColor | 进度条轨道底色 | String | - | 'rgba(226,232,240,0.6)' |
| showInfo | 是否显示进度百分比文字 | Boolean | true | false | true |
| size | 环形进度条直径尺寸 (px,仅 type="circle" 生效) | Number | String | - | 120 |
| status | 进度状态配色预设 | String | success | warning | error | '' |
插槽说明 (Slots)
| 插槽名 | 说明 |
|---|---|
| default | 自定义进度百分比文字内容 |