vue自适应带圆圈的进度条实现#根据数量占比计算进度条长度#颜色可控

一些组件库例如ele的进度条实现只是简单的实现进度条样式，进度条的长度是百分比形式，未做到占比数/总数 去动态计算，这是我在这里要去实现的

不罗嗦，先看样式

<!--
  @name:进度条封装
  @des:基于一个总数计算得出占比的分量去显示自定义的步骤条颜色
  @params:可进行总量、占比数量、占比进度条颜色、未占比进度条颜色、进度条长度的传入；圆圈颜色是占比和未占比颜色的组合构成
  @TODO:占比颜色和未占比颜色其实是个透明度的关系这里进行了处理，但是圆圈的颜色处理方式没走透明度，需要优化
-->
<template>
    <div class="pregress f f-a-c" :id="uuId">
        <div class="before-color"></div>
        <div class="pregress-circle"></div>
        <div class="end-color"></div>
    </div>
</template>

<script>
import {nanoid} from 'nanoid';
export default {
    name: "wu-progress",
    data(){
        return{
            uuId:''
        }
    },
    props:{
        beforeColor:{
            type:String,
            default:'#368FFF'
            /*占比进度条颜色*/
        },
        endColor:{
            type:String,
            default:'#DEEDFF'
        },
        sum:{
            type:Number,
            default:100
            /*进度条总量*/
        },
        proData:{
            type:Number,
            default:10
            /*进度条所占比的数量*/
        },
        width:{
            type:Number,
            default:183
            /*总宽度*/
        },
    },
    mounted() {
        let _percentWidth = (this.proData/this.sum)*this.width
        $(`.pregress`).css({width:this.width+'px'})
        $(`#${this.uuId} .before-color`).css({'background':this.beforeColor,'width':_percentWidth+'px','flex-shrink':'0'})
        $(`#${this.uuId} .pregress-circle`).css({'background':this.beforeColor,
            'width':'10px',
            'height':'10px',
            'flex-shrink':'0',
            'margin-left':'-2px',
            'border':`3px solid ${this.endColor}`,
            'border-radius':'50%'})
        $(`#${this.uuId} .end-color`).css({'background':this.beforeColor,'width':'100%','opacity':'0.1'})
    },
    created() {
        this.uuId = nanoid();
    }
}
</script>

<style scoped lang="less">
.f {
	display: flex;
	/* 设置为flex布局 */
}
.f-a-c {
	align-items: center;
	/* 交叉轴上如何对齐，每个div中心轴对齐 */
}
.pregress{
    //width: 100%;
    border-radius: 6px;
    height: 5px;
    .before-color,.end-color{
        height: 100%;
    }
    .before-color{
        border-radius: 6px 0 0 6px;
    }
    .end-color{
        border-radius: 0 6px 6px 0;
    }
}
</style>

组件调用
可以全局挂载–然后调用，这里的dom用了uuid当作id去渲染样式，不用担心互相影响，里面可配置颜色，动态计算长度，进度条总长度等~

 <wuprogress class="progress" :before-color="item.color1" :end-color="item.color2"></wuprogress>