更新记录
1.0.1(2023-09-19) 下载此版本
改为uni_modules规范
1.0.0(2023-05-25) 下载此版本
初始版本
平台兼容性
Vue2 | Vue3 |
---|---|
√ | √ |
App | 快应用 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
---|---|---|---|---|---|---|
app-vue app-nvue | √ | √ | √ | √ | √ | √ |
钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 |
---|---|---|---|
√ | √ | √ | √ |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
√ | √ | √ | √ | √ | √ | √ | √ | √ |
piaoyi-progress-bar 进度条
使用方法:
正常进度条
<piaoyiProgressBar :progress="50" backgroundColor="#EFEFF4" progressBackgroundColor="#07C160" :showText="true"
textColor="#fff" :textSize="24" :height="20"></piaoyiProgressBar>
<view class="bg">
环状进度条
<piaoyiProgressBar canvasId="progressCanvas4" :progress="75" backgroundColor="#EFEFF4"
progressBackgroundColor="#07C160" :showText="true" textColor="#000000" :textSize="24" :height="20"
:isCircular="true" :diameter="200"></piaoyiProgressBar>
<view class="bg">
import piaoyiProgressBar from '@/uni_modules/piaoyi-progress-bar/components/piaoyi-progress-bar/piaoyi-progress-bar.vue';
export default {
components: {
piaoyiProgressBar
},
data() {
return {
}
},
methods: {
}
}
事件说明
无
Prop
参数名称 | 描述 | 默认值 |
---|---|---|
progress | 进度值 | 空(范围:0-100) |
backgroundColor | 背景色 | #EFEFF4 |
progressBackgroundColor | 进度背景色 | #07C160 |
showText | 是否显示文本 | true |
textColor | 文本颜色 | #000000 |
textSize | 文本大小 | 24 |
height | 进度条线条宽度 | 20 |
diameter | 进度条整体大小 | 200 |
isCircular | 是否显示环状 | false |
canvasId | isCircular为true时必传,一个页面使用多个需要定义不同的canvasId | canvasId |