<template>
<div class="elCircle-progress">
<el-progress
class="progress-position"
type="dashboard"
:percentage="percentage"
:color="colors"
></el-progress>
<div :style="{'color':fontColor}" class="chaoji-po">{{describePer}}</div>
<div>
<el-button-group>
<el-button type="success" icon="el-icon-minus" @click="decrease"></el-button>
<el-button type="warning" icon="el-icon-plus" @click="increase"></el-button>
</el-button-group>
</div>
</div>
</template>
<script>
export default {
data() {
return {
percentage: 10,
colors: [
{ color: "#f56c6c", percentage: 20 },
{ color: "#e6a23c", percentage: 40 },
{ color: "#5cb87a", percentage: 60 },
{ color: "#1989fa", percentage: 80 },
{ color: "#6f7ad3", percentage: 100 }
],
fontColor: "",
describePer:'',
};
},
mounted(){
this.checkColor();
},
methods: {
increase() {
this.percentage += 10;
if (this.percentage > 100) {
this.percentage = 100;
}
this.checkColor();
},
checkColor(){
if (this.percentage <= 100) {
this.fontColor = "#6f7ad3";
$('.el-progress__text').css('color','#6f7ad3');
this.describePer = '超级棒';
}
if (this.percentage < 80) {
this.fontColor = "#1989fa";
$('.el-progress__text').css('color','#1989fa');
this.describePer = '很棒';
}
if (this.percentage < 60) {
this.fontColor = "#5cb87a";
$('.el-progress__text').css('color','#5cb87a');
this.describePer = '一般';
}
if (this.percentage < 40) {
this.fontColor = "#e6a23c";
$('.el-progress__text').css('color','#e6a23c');
this.describePer = '差';
}
if (this.percentage <= 20) {
this.fontColor = "#f56c6c";
$('.el-progress__text').css('color','#f56c6c');
this.describePer = '很差';
}
if (this.percentage <= 10) {
this.fontColor = "red";
$('.el-progress__text').css('color','red');
this.describePer = '非常差';
}
},
decrease() {
this.percentage -= 10;
if (this.percentage < 0) {
this.percentage = 0;
}
this.checkColor();
}
}
};
</script>
<style lang="less">
.elCircle-progress {
.el-progress--circle .el-progress__text,
.el-progress--dashboard .el-progress__text {
font-size: 30px !important;
top: 40%;
}
}
</style>
<style lang="less">
.elCircle-progress {
.progress-position {
margin: 200px 0 20px 0;
position: relative;
}
.chaoji-po {
position: relative;
top: -70px;
left: 0;
color: red;
}
}
</style>
半环形进度条(vue+element)
最新推荐文章于 2024-02-28 14:55:47 发布