Progress 进度条
基础用法
- 用于显示一个任务或过程的进度。
- 支持自定义颜色、高度、动画时间等属性。
vue
<template>
<sn-progress v-model="value"></sn-progress>
</template>更多演示请下载 demo 查看
属性
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|---|---|---|---|---|
| vModel | 进度值,范围 0 ~ 100 | Number | 0 | - |
| showValueText | 是否显示进度值文本 | Boolean | false | true | false |
| valueTextPosition | 进度值文本位置,可选内部或外部 | String | outside | inside | outside |
| valueTextSize | 进度值文本大小 | String | - | - |
| valueTextWidth | 进度值文本宽度 | String | 40px | - |
| height | 进度条高度 | String | 6px | - |
| bgColor | 进度条未激活部分颜色 | String | $line | - |
| activeColor | 进度条激活部分颜色 | String | $primary | - |
| textColor | 进度值文本颜色 | String | - | - |
| borderRadius | 进度条圆角大小 | String | $circle | - |
| aniTime | 进度条动画时间 | String | $normal | - |
| customStyle | 自定义进度条样式 | UTSJSONObject | {} | - |
| customTextStyle | 自定义进度值文本样式 | UTSJSONObject | {} | - |
| customActiveStyle | 自定义激活部分样式 | UTSJSONObject | {} | - |
事件
| 名称 | 类型 | 说明 |
|---|---|---|
| change | (value: Number) => Void | 进度变化时触发的事件 |

