circle.vue
2.25 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<template>
<view style="text-align: center;">
<div style="display: inline-block;position: relative;">
<svg style="transform: rotate(-90deg)" :width="width" :height="width" xmlns="http://www.w3.org/2000/svg">
<circle :r="(width-radius)/2"
:cy="width/2"
:cx="width/2"
:stroke-width="radius"
:stroke="backgroundColor"
fill="none"
/>
<circle ref="$bar"
:r="(width-radius)/2"
:cy="width/2"
:cx="width/2"
:stroke="barColor"
:stroke-width="radius"
:stroke-linecap="isRound ? 'round' : 'square'"
:stroke-dasharray="(width-radius)*3.14"
:stroke-dashoffset="isAnimation ? (width-radius) * 3.14 : (width - radius) * 3.14 * (100 - progress) / 100"
fill="none"
/>
</svg>
<div class='contentBox'>
<div>
<img :src="picSrc" alt="">
</div>
<div :style="{color:textColor}">{{num}}人</div>
</div>
</div>
</view>
</template>
<script>
export default {
data () {
return {
}
},
computed: {
width() {
return uni.upx2px(200)
},
},
props: {
num:[Number,String],
picSrc:[String],
textColor:[String],
align:[String],
radius: [Number, String], // 进度条厚度
progress: [Number, String], // 进度条百分比
barColor: String, // 进度条颜色
backgroundColor: String, // 背景颜色
isAnimation: { // 是否是动画效果
type: Boolean,
default: true,
},
isRound: { // 是否是圆形画笔
type: Boolean,
default: true,
},
id: { // 组件的id，多组件共存时使用
type: [String, Number],
default: 1,
},
duration: { // 整个动画时长
type: [String, Number],
default: 1000,
},
delay: { // 延迟多久执行
type: [String, Number],
default: 200,
},
timeFunction: { // 动画缓动函数
type: String,
default: 'cubic-bezier(0.99, 0.01, 0.22, 0.94)',
},
},
data() {
return {
idStr: `circle_progress_keyframes_${this.id}`
}
},
beforeDestroy() {},
mounted() {},
}
</script>
<style scoped>
.contentBox{
position: absolute;
top: 61.59upx;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
.contentBox img{
width: 32.6upx;
}
</style>