环形进度条 CircleProgress
感觉这个像素风环形进度条好难画呀。
基础用法
通过 percentage 属性设置 CircleProgress 的进度（0 - 100），超出范围的值会被自动限制在 0 到 100 之间。
50%
隐藏源代码
主题颜色
CircleProgress 支持 'primary'（默认）、'sakura'、'success'、'warning'、'danger' 和 'notice' 多种主题。
20%
35%
50%
65%
80%
100%
隐藏源代码
尺寸
通过 size 属性控制 CircleProgress 的尺寸（px），默认值为 128。
30%
50%
70%
100%
隐藏源代码
环形粗细
strokeWidth 属性控制 CircleProgress 环形部分的粗细，默认值为 12。
60%
60%
60%
60%
隐藏源代码
自定义颜色
通过 color 为 CircleProgress 传入自定义颜色，支持的颜色格式详见 支持的颜色解析。可使用 trackColor 覆盖轨道背景色。
35%
65%
100%
隐藏源代码
文本与自定义内容
默认会在 CircleProgress 圆心显示百分比文本。设置 showText 为 false 可隐藏文本，也可以使用默认插槽渲染自定义内容，插槽会暴露 percentage 参数。
60%
隐藏源代码
API
CircleProgressProps
| 属性 | 类型 | 可选 | 默认值 | 描述 | 版本 |
|---|---|---|---|---|---|
| percentage | number | 是 | 0 | CircleProgress 的完成进度（0-100），超出范围会被自动限制。 | 0.2.0 |
| theme | 'primary' | 'sakura' | 'success' | 'warning' | 'danger' | 'notice' | 是 | 'primary' | CircleProgress 的主题。 | 0.2.0 |
| size | number | 是 | 128 | CircleProgress 的尺寸。 | 0.2.0 |
| strokeWidth | number | 是 | 12 | CircleProgress 环形部分的粗细。 | 0.2.0 |
| color | string | 是 | | CircleProgress 的自定义主色，详见 支持的颜色解析。 | 0.2.0 |
| trackColor | string | 是 | | CircleProgress 环形轨道背景色。 | 0.2.0 |
| showText | boolean | 是 | true | 是否在 CircleProgress 圆心显示百分比文本。 | 0.2.0 |
| pollSizeChange | boolean | 是 | false | 是否轮询检测 CircleProgress 的尺寸变化。 | 0.2.0 |
CircleProgressSlots
| 插槽 | 参数 | 描述 | 版本 |
|---|---|---|---|
| default | percentage: number | CircleProgress 圆心的默认插槽，用于自定义内容。 | 0.2.0 |