更新记录
0.0.3(2023-06-06)
优化文档
0.0.1(2023-06-02)
基于Vue3和TypeScript开发的uni-app 进度条组件,用于展示操作的当前进度。
平台兼容性
Vue2 | Vue3 |
---|---|
× | √ |
App | 快应用 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
---|---|---|---|---|---|---|
HBuilderX 3.7.11 app-vue | × | √ | √ | × | × | √ |
钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 |
---|---|---|---|
√ | × | × | × |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
√ | √ | √ | √ | × | × | × | × | × |
组件库官方文档:fant-mini-plus
组件库提供更多vue3组件,比单独引入更加强大
Progress 进度条
进度条组件,用于展示操作的当前进度。
代码演示
基础用法
通过v-model
表示进度条的当前进度,text
属性控制进度条中间文字内容。
<hd-progress v-model="current" :text="`${current}%`"></hd-progress>
const current = ref<number>(10)
宽度控制
通过strokeWidth
属性来控制进度条宽度,默认24rpx
。
<hd-progress v-model="current" strokeWidth="15px"></hd-progress>
const current = ref<number>(10)
颜色定制
通过color
属性控制进度条颜色,默认#1C64FD
,通过layerColor
属性控制进度条轨道颜色,默认#EBEEF5
。
<hd-progress v-model="current" color="#1C64FD" layerColor="#EBEEF5"></hd-progress>
const current = ref<number>(10)
是否置灰
通过inactive
属性来控制进度条是否处于禁用状态,默认false。
<hd-progress v-model="current" :inactive="true"></hd-progress>
const current = ref<number>(10)
是否展示进度文字
通过showText
属性来控制是否展示进度文字,默认true。
<hd-progress v-model="current" :showText="false"></hd-progress>
const current = ref<number>(10)
Props
Name | Description | Type | Required | Default |
---|---|---|---|---|
inactive | 是否置灰 | Boolean |
false |
false |
value | 进度百分比,推荐使用v-model方式 | Number |
false |
0 |
showText | 是否显示进度文字 | Boolean |
false |
true |
text | 进度条文字 | String |
false |
- |
textColor | 进度文字颜色 | String |
false |
#FFFFFF |
color | 进度条颜色 | String |
false |
#1C64FD |
layerColor | 进度条底色 | String |
false |
#EBEEF5 |
strokeWidth | 进度条粗细,默认单位为px | Number |
false |
24 |
联系方式
有不明白或者建议可以扫码交流