VUE 自定义进度条组件

发表于 更新于 分类于
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