console
window.app = new Vue({
el: "#app",
data() {
return {
total: 0,
percentage: 0,
overflow: 0,
};
},
computed: {
percentageUse() {
if (!this.total) {
return 0;
}
return (
((this.percentage + this.overflow) / this.total) *
100
);
},
overflowUse() {
if (!(this.percentage + this.overflow)) {
return 0;
}
return (
(this.overflow /
(this.percentage + this.overflow)) *
100
);
},
},
methods: {
handleFormat() {
return "";
},
},
created() {
const 后端返回的值 = 120;
if (后端返回的值 <= 100) {
this.total = 100;
this.percentage = 后端返回的值;
} else {
this.total = 后端返回的值;
this.percentage = 100;
this.overflow = 后端返回的值 - 100;
}
},
});
<div id="app">
<el-progress
:stroke-width="26"
:percentage="percentageUse"
:format="handleFormat"
:style="{ '--overflow-width': `${overflowUse}%`}">
</el-progress>
</div>
.el-progress-bar__inner {
overflow: hidden;
&:after {
width: var(--overflow-width);
transition: all 0.6s ease;
background: yellow;
}
}