更新记录
1.0.1(2023-08-25)
下载此版本
增加逆向进度功能,优化抖音小程序初始化空白问题
| isReduce | Boolean | false | 是否逆时针转(100-0) |
1.0.0(2023-08-10)
下载此版本
纯css圆形进度条
平台兼容性
App |
快应用 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
app-vue app-nvue |
√ |
√ |
√ |
√ |
√ |
√ |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
√ |
√ |
√ |
√ |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
cus-progress-cricle
属性说明
属性名 |
类型 |
默认值 |
说明 |
wrapperWidth |
Number |
200 |
圆形进度区域 |
borderWidth |
Number |
20 |
圆形进度宽度 |
bgColor |
String |
'rgba(172, 172, 172,0.3)' |
圆形进度背景颜色 |
progressColor |
String |
'rgba(242, 157, 248, 0.5)' |
圆形进度颜色 |
progress |
Number |
0 |
进度 |
isReduce |
Boolean |
false |
是否逆时针转(100-0) |
使用示例
<progressCricle :progress="progress"></progressCricle>
import progressCricle from '@/components/cus-progress-cricle/cus-progress-cricle.vue'
export default {
components: {
progressCricle
},
data() {
return {
progress:80
}
}
}