SOURCE

console 命令行工具 X clear

                    
>
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 后端返回的值 = 18.75;
        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;
  }
}

本项目引用的自定义外部资源