first commit
This commit is contained in:
@@ -0,0 +1,2 @@
|
||||
## 1.0.1（2023-09-19）
|
||||
改为uni_modules规范
|
||||
+157
@@ -0,0 +1,157 @@
|
||||
<template>
|
||||
<view class="progress-bar" :style="'min-height:' + height + 'rpx'">
|
||||
<view v-if="!isCircular" class="progress-bar-bg"
|
||||
:style="{ backgroundColor: backgroundColor, height: height + 'rpx' }"></view>
|
||||
<view v-if="!isCircular" class="progress-bar-inner"
|
||||
:style="{ width: progress + '%', backgroundColor: progressBackgroundColor, height: height + 'rpx' }">
|
||||
<view v-if="showText" class="progress-bar-text" :style="{ color: textColor, fontSize: textSize + 'rpx' }">
|
||||
{{ progress + '%' }}
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="isCircular" class="progress-bar-circular"
|
||||
:style="{ width: diameter + 'rpx', height: diameter + 'rpx' }">
|
||||
<canvas :canvas-id="canvasId" :style="{ width: diameter + 'rpx', height: diameter + 'rpx' }"></canvas>
|
||||
<view v-if="showText" class="progress-bar-text" :style="{ color: textColor, fontSize: textSize + 'rpx' }">
|
||||
{{ progress + '%' }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
screenWidth: 0, // 屏幕宽度
|
||||
}
|
||||
},
|
||||
props: {
|
||||
progress: {
|
||||
type: Number,
|
||||
required: true,
|
||||
validator(value) {
|
||||
// 自定义验证函数，限制范围为 0 到 100
|
||||
return value >= 0 && value <= 100;
|
||||
}
|
||||
},
|
||||
backgroundColor: {
|
||||
type: String,
|
||||
default: '#EFEFF4'
|
||||
},
|
||||
progressBackgroundColor: {
|
||||
type: String,
|
||||
default: '#07C160'
|
||||
},
|
||||
showText: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
textColor: {
|
||||
type: String,
|
||||
default: '#000000'
|
||||
},
|
||||
textSize: {
|
||||
type: Number,
|
||||
default: 28
|
||||
},
|
||||
height: {
|
||||
type: Number,
|
||||
default: 20
|
||||
},
|
||||
isCircular: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
diameter: {
|
||||
type: Number,
|
||||
default: 100
|
||||
},
|
||||
canvasId: {
|
||||
type: String,
|
||||
default: 'canvasId'
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// 获取设备信息
|
||||
uni.getSystemInfo({
|
||||
success: (res) => {
|
||||
this.screenWidth = res.screenWidth;
|
||||
if (this.isCircular) {
|
||||
this.drawCircularProgress();
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
watch: {
|
||||
progress: function(val) {
|
||||
console.log(val)
|
||||
if (this.isCircular) {
|
||||
this.drawCircularProgress();
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
drawCircularProgress() {
|
||||
const canvas = uni.createCanvasContext(this.canvasId, this);
|
||||
const radius = (this.rpxToPx(this.diameter) - this.rpxToPx(this.height)) /
|
||||
2; // Subtracting 10 to leave space for the border
|
||||
|
||||
const startAngle = -Math.PI / 2;
|
||||
const endAngle = (2 * Math.PI * this.progress) / 100 + startAngle;
|
||||
// Draw background circle
|
||||
canvas.setLineWidth(this.rpxToPx(this.height));
|
||||
canvas.setStrokeStyle(this.backgroundColor);
|
||||
canvas.beginPath();
|
||||
canvas.arc(this.rpxToPx(this.diameter) / 2, this.rpxToPx(this.diameter) / 2, radius, 0, 2 * Math.PI);
|
||||
canvas.stroke();
|
||||
|
||||
// Draw progress arc
|
||||
canvas.setLineWidth(this.rpxToPx(this.height));
|
||||
canvas.setStrokeStyle(this.progressBackgroundColor);
|
||||
canvas.beginPath();
|
||||
canvas.arc(this.rpxToPx(this.diameter) / 2, this.rpxToPx(this.diameter) / 2, radius, startAngle, endAngle,
|
||||
false);
|
||||
canvas.stroke();
|
||||
canvas.draw();
|
||||
},
|
||||
rpxToPx(rpx) {
|
||||
// 计算像素值
|
||||
const px = (rpx / 750) * this.screenWidth
|
||||
return px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.progress-bar {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.progress-bar-bg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
|
||||
.progress-bar-inner {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
border-radius: 10rpx;
|
||||
transition: width 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.progress-bar-circular {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.progress-bar-text {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,15 @@
|
||||
{
|
||||
"id": "piaoyi-progress-bar",
|
||||
"name": "piaoyi进度条",
|
||||
"displayName": "piaoyi进度条",
|
||||
"version": "1.0.1",
|
||||
"description": "进度条 可设置环状 开箱即用",
|
||||
"keywords": [
|
||||
"进度条",
|
||||
"可设置环状",
|
||||
"开箱即用"
|
||||
],
|
||||
"dcloudext": {
|
||||
"type": "component-vue"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,56 @@
|
||||
### 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 |
|
||||
|
||||
### 可接定制化组件开发
|
||||
### 右侧有本人代表作小程序二维码，可以扫码体验
|
||||
### 如使用过程中有问题或有一些好的建议，欢迎加QQ群互相学习交流：120594820
|
||||
Reference in New Issue
Block a user