VUE 自定义进度条组件
前言
平常使用的框架中都是单一的进度，不能设置多个进度，这里就自定义一个支持多进度的进度条
重叠
效果
组件代码
<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 = parseInt('' + (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>使用方法
<z-progress :values="[100,800]" :max="1000"/>
<script>
import ZProgress from '@/components/ZProgress'
export default {
components: { ZProgress },
}
</script>不重叠
效果
组件代码
<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 = parseInt('' + (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>使用方法
<z-progress :values="[100,800]" :max="1000"/>
<script>
import ZProgress from '@/components/ZProgress'
export default {
components: { ZProgress },
}
</script>本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2022-04-08，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
