VUE 自定义进度条组件

前言

平常使用的框架中都是单一的进度,不能设置多个进度,这里就自定义一个支持多进度的进度条

重叠

效果

image-20220408175540185

组件代码

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
<template>
<div class="z_progress" :style="{height:height,borderRadius:radius}">
<div v-for="(item,index) in mdata"
:key="index"
class="z_progress_inner"
:style="{width:item.rate+'%',backgroundColor:item.color,borderRadius:radius}"></div>
</div>
</template>

<script>
export default {
name: 'ZProgress',
props: {
height: {
type: String,
default () {
return '8px'
}
},
radius: {
type: String,
default () {
return '4px'
}
},
max: {
type: Number,
default () {
return 100
}
},
colors: {
type: Array,
default () {
return ['#1989fa', 'rgb(242, 130, 106)', 'rgb(114, 50, 221)']
}
},
values: {
type: Array,
default () {
return [30, 60]
}
}
},
mounted () {
},
computed: {
mdata () {
const temp = []
for (let i = 0; i < this.values.length; i++) {
let color = ''
if (i < this.colors.length) {
color = this.colors[i]
} else {
color = this.colors[this.colors.length - 1]
}
const value = this.values[i]
const max = this.max
const rate = parseFloat('' + (1.0 * value * 100 / max))
temp.push({
value: value,
color: color,
rate: rate
})
}
temp.sort((n1, n2) => {
return n2.value - n1.value
})
return temp
}
},
methods: {}
}
</script>

<style scoped>
.z_progress {
background-color: #f3f3f3;
width: 100%;
position: relative;
}

.z_progress_inner {
height: 100%;
position: absolute;
top: 0;
left: 0;
}
</style>

使用方法

1
2
3
4
5
6
7
8
9
<z-progress :values="[100,800]" :max="1000"/>

<script>
import ZProgress from '@/components/ZProgress'

export default {
components: { ZProgress },
}
</script>

不重叠

效果

image-20220413150709184

组件代码

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
<template>
<div class="z_progress" :style="{height:height,borderRadius:radius}">
<div v-for="(item,index) in mdata"
:key="index"
class="z_progress_inner"
:style="{width:item.rate+'%',backgroundColor:item.color,borderRadius:radius}"></div>
</div>
</template>

<script>
export default {
name: 'ZProgress2',
props: {
height: {
type: String,
default() {
return '8px'
}
},
radius: {
type: String,
default() {
return '4px'
}
},
max: {
type: Number,
default() {
return 100
}
},
colors: {
type: Array,
default() {
return ['#1989fa', 'rgb(242, 130, 106)', 'rgb(114, 50, 221)']
}
},
values: {
type: Array,
default() {
return [30, 60]
}
}
},
mounted() {
},
computed: {
mdata() {
const temp = []
for (let i = 0; i < this.values.length; i++) {
let color = ''
if (i < this.colors.length) {
color = this.colors[i]
} else {
color = this.colors[this.colors.length - 1]
}
const value = this.values[i]
const max = this.max
const rate = parseFloat('' + (1.0 * value * 100 / max))
temp.push({
value: value,
color: color,
rate: rate
})
}
return temp
}
},
methods: {}
}
</script>

<style scoped>
.z_progress {
background-color: #f3f3f3;
width: 100%;
position: relative;
display: flex;
}

.z_progress_inner {
height: 100%;
position: relative;
}
</style>

使用方法

1
2
3
4
5
6
7
8
9
<z-progress2 :values="[100,800]" :max="1000"/>

<script>
import ZProgress2 from '@/components/ZProgress2'

export default {
components: { ZProgress2 },
}
</script>

要想出现如下的效果,只需把第一个颜色设置为透明即可

image-20220506212349899

如下

1
<z-progress2 :values="[100,300]" :colors="['transparent','#1989fa']" :max="1000"/>

中间开始

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
102
103
104
105
106
107
108
109
110
111
112
113
<template>
<div class="z_progress"
:style="{height:height,borderRadius:radius}"
@mouseenter="shownum=true"
@mouseleave="shownum=false">
<div
class="z_progress_inner"
:style="{left:mdata.rate_begin+'%',width:mdata.rate+'%',backgroundColor:mdata.color,borderRadius:radius}">
</div>

<div v-show="shownum" class="num"
:style="{backgroundColor:mdata.color,borderRadius:radius}"
>{{ mdata.value }}
</div>
</div>
</template>

<script>
export default {
name: 'ZProgress3',
props: {
height: {
type: String,
default() {
return '8px'
}
},
radius: {
type: String,
default() {
return '4px'
}
},
begin: {
type: Number,
default() {
return 20
}
},
num: {
type: Number,
default() {
return 50
}
},
max: {
type: Number,
default() {
return 100
}
},
color: {
type: String,
default() {
return '#1989fa'
}
},
values: {
type: Array,
default() {
return [30, 60]
}
}
},
computed: {
mdata() {
let value = this.num;
const max = this.max
const rate_begin = parseFloat('' + (1.0 * this.begin * 100 / max))
const rate = parseFloat('' + (1.0 * value * 100 / max))
return {
value: value,
color: this.color,
rate_begin: rate_begin,
rate: rate
}
}
},
data() {
return {
shownum: false
}
}
}
</script>

<style scoped>
.z_progress {
background-color: #f3f3f3;
width: 100%;
position: relative;
display: flex;
align-items: center;
}

.z_progress_inner {
height: 100%;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}

.num {
color: white;
padding-left: 4px;
padding-right: 4px;
user-select: none;
position: absolute;
right: 0;
font-size: 8px;
}
</style>

使用方法

1
2
3
4
5
6
7
8
9
10
11
12
13
<z-progress3
:begin="300"
:num="500"
:color="is_success?'#5ECE79':'#F45933'"
:max="1000"/>

<script>
import ZProgress3 from '@/components/ZProgress3'

export default {
components: { ZProgress3 },
}
</script>

效果如下

未悬浮

image-20220508132312990

悬浮后

image-20220508132626900