t-progress-circle
ProgressCircle 圆形进度
组件介绍
环形进度条组件是一个可定制的UI组件，用于显示圆形进度指示，支持自定义线条宽度、颜色，并可显示进度百分比。
平台兼容
| Harmony | H5 | Android | iOS | 小程序 | UTS |
|---|---|---|---|---|---|
| ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
基础用法
vue
<template>
<view class="progress-circle-demo">
<t-progress-circle :modelValue="30"></t-progress-circle>
<t-progress-circle :modelValue="60" :showLabel="true"></t-progress-circle>
<t-progress-circle :modelValue="90" type="primary" :showLabel="true" unit="%"></t-progress-circle>
<t-progress-circle :modelValue="75" activeColor="#ff6b6b" :showLabel="true"></t-progress-circle>
</view>
</template>
<style scoped>
.progress-circle-demo {
padding: 40rpx;
display: flex;
flex-direction: column;
align-items: center;
gap: 30rpx;
}
</style>Props
| 属性名 | 类型 | 默认值 | 说明 | 可选值 |
|---|---|---|---|---|
| size | String | "medium" | 组件尺寸 | large, medium, small, mini |
| type | String | "primary" | 组件类型 | info, primary, error, warning, success |
| disabled | Boolean | false | 组件是否禁用 | true, false |
| hover | Boolean | false | 是否有点击效果 | true, false |
| path | String | "" | 点击组件后跳转的页面路径 | - |
| effect | String | "normal" | 组件显示主题 | normal, dark, light, plain |
| backgroundLineWidth | String | "20rpx" | 背景圈线条宽度 | - |
| activeLineWidth | String | "20rpx" | 进度圈线条宽度 | - |
| inactiveColor | String | "#ececec" | 进度条未激活时的颜色 | - |
| activeColor | String | "" | 进度条激活时的颜色 | - |
| modelValue | Number | 0 | 双向绑定的值 | 0-100 |
| unit | String | "%" | 进度条值的单位 | - |
| showLabel | Boolean | false | 是否显示进度标签 | true, false |
| duration | Number | 300 | 进度条过渡的持续时间，单位为毫秒 | - |
Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| click | 点击时触发 | - |
| transitionend | 动画结束时触发 | - |
| initFinished | 组件初始化完成触发 | 组件的节点信息 |
| touchstart | 触摸开始时触发 | 触摸事件对象 |
| touchend | 触摸结束时触发 | 触摸事件对象 |
| touchmove | 触摸移动时触发 | 触摸事件对象 |
| touchcancel | 触摸取消时触发 | 触摸事件对象 |