Progress 进度条
用于展示操作进度，告知用户当前状态和预期。
ts
import { createApp } from 'vue'
import { ElProgress } from '@szhn/dh-design-pc'
const app = createApp()
app.use(ElProgress)设计规范
- 线形进度条默认高度建议使用
stroke-width="8"（设计 token：--dh-progress-stroke-width） - 轨道色使用填充浅灰，进度色使用主题色自贸蓝；成功 / 警告 / 异常分别映射语义色
- 百分比文案 14px、次要文字色，与进度条间距 8px；全圆角轨道
- 环形 / 仪表盘进度条：标准 56px 尺寸百分比文案 14px（token：
--dh-font-size-body-large）、常规字重（不加粗）；大尺寸（126px）默认文案 24px（token：--dh-font-size-title-large） - 环形进度条示例尺寸 56px（
width="56"）；成功 / 警告 / 异常使用描边对勾、叹号、叉，图标画布 56×56
直线进度条
进度条内显示百分比标识
百分比不占用额外空间，适用于文件上传等场景。
自定义进度条的颜色
可以通过 color 属性来设置进度条的颜色。 该属性可以接受十六进制颜色值，函数和数组。
环形进度条
仪表盘形进度条
您也可以指定 type 属性到 dashboard 使用控制面板进度栏。
自定义内容
动画进度条
条纹进度条
API
属性
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| percentage required | percentage | number | 0 |
| type | 进度条类型 | enum | line |
| stroke-width | 进度条的宽度 | number | 6 |
| text-inside | 进度条显示文字内置在进度条内（仅 type 为 'line' 时可用） | boolean | false |
| status | 进度条当前状态 | enum | — |
| indeterminate | 是否为动画进度条 | boolean | false |
| duration | 控制动画进度条速度和条纹进度条流动速度 | number | 3 |
| color | 进度条背景色 （会覆盖 status 状态颜色） | string / function / Array | '' |
| width | 环形进度条画布宽度（只在 type 为 circle 或 dashboard 时可用） | number | 126 |
| show-text | 是否显示进度条文字内容 | boolean | true |
| stroke-linecap | circle/dashboard 类型路径两端的形状 | enum | round |
| format | 指定进度条文字内容 | Function | — |
| striped | 在进度条上增加条纹 | boolean | false |
| striped-flow | 让进度条上的条纹流动起来 | boolean | false |
Slots
| 名称 | 说明 | 类型 |
|---|---|---|
| default | 自定义内容 | object |