Vue如何实现渐变色进度条(vue,开发技术)

功能要求

• 进度条的总格子数可以自定义

• 当前件数的占比和当前蓝色格子数对应

• 格子的蓝色渐变要符合UI设计

首先确定props里面的值

即组件需要接收的值

这里只有名称、总数和当前值

props:{name:{type:String,default:()=>('数据名称')},total:{type:Number,default:()=>(24)},value:{type:Number,default:()=>(18)},},

然后就是主要的实现方法，这里接收一个cubeCount作为参数，即需要定义总格子数是多少

methods:{initStatus(cubeCount){ //1.拿到总格子数div的宽度 lettotalDomWidth=this.$refs.total.offsetWidth;//2.算出当前格子的比率letratio=(this.value/this.total);//3.计算出每个格子的宽度letcubeWidth=Math.floor((totalDomWidth/cubeCount)-1);},},

在计算每个格子的宽度的时候，用了Math.floor向下取整,至于后面的-1,是格子之间的间距

接着，根据每个格子的宽度，以及格子的数量，动态生成总的格子，插入到div中

for(leti=0;i<cubeCount;i++){letcubeDom=document.createElement('span');cubeDom.style.background='#0F3D61'cubeDom.style.width=cubeWidth+'px'this.$refs.total.appendChild(cubeDom)}

接着根据之前算的比率算出当前的数值占了几个格子,这里也是向下取整

letnowCubeCount=Math.floor(cubeCount*ratio);

然后就是比较头痛的渐变色处理，这里我只取了第一个格子和最后一个格子的颜色,利用数组计算差值

letstartColor=[16,139,247];//RGB(16,139,247)letendColor=[15,218,250];//RGB(15,218,250)letperDiffColor=[];/* 这里用结束时的颜色减掉开始时的颜色得到总色差然后除以当前的格子数，分成更小的色差值，保留三位小数，并转为数字然后将每一个格子对应的颜色差值存到perDiffColor数组*/for(leti=0;i<endColor.length;i++){perDiffColor.push(Number(((endColor[i]-startColor[i])/nowCubeCount).toFixed(3)))}

接着,给当前的格子数设置背景色，即初始的颜色+前格子的下标*每一份的颜色差值,这样组件就大致完成了

//拿到之前全部格子数cubeDomArr=this.$refs.total.children;//给当前的格子设置颜色for(leti=0;i<nowCubeCount;i++){cubeDomArr[i].style.background=`RGB(${startColor[0]+i*perDiffColor[0]},${startColor[1]+i*perDiffColor[1]},${startColor[2]+i*perDiffColor[2]})`}

然后去使用看看,效果如下：

<dataItemname="这里应该是当前的数据名称"total=1267value=500></dataItem>

源代码如下

(mixin.scss样式文件没在，相信大家自己也能写出来)

<template><divclass="box"><divclass="name">{{name}}</div><divclass="value">{{value}}<span>件</span></div><divclass="total"ref="total"></div></div></template>

<script>exportdefault{name:"dataItem",props:{name:{type:String,default:()=>('数据名称')},total:{type:Number,default:()=>(24)},value:{type:Number,default:()=>(18)},},data(){return{};},mounted(){letthat=thisthis.initStatus(16);},updated(){this.initStatus(16);},methods:{initStatus(cubeCount){letthat=this;lettotalDomWidth=this.$refs.total.offsetWidth;letratio=(this.value/this.total);letcubeWidth=Math.floor((totalDomWidth/cubeCount)-1);letcubeDomArr;for(leti=0;i<cubeCount;i++){letcubeDom=document.createElement('span');cubeDom.style.background='#0F3D61'cubeDom.style.width=cubeWidth+'px'this.$refs.total.appendChild(cubeDom)}letnowCubeCount=Math.floor(cubeCount*ratio);cubeDomArr=this.$refs.total.children;letstartColor=[16,139,247];letendColor=[15,218,250];letperDiffColor=[];for(leti=0;i<endColor.length;i++){perDiffColor.push(Number(((endColor[i]-startColor[i])/nowCubeCount).toFixed(3)))}for(leti=0;i<nowCubeCount;i++){cubeDomArr[i].style.background=`RGB(${startColor[0]+i*perDiffColor[0]},${startColor[1]+i*perDiffColor[1]},${startColor[2]+i*perDiffColor[2]})`}},},}</script>

<stylelang="scss"scoped>@import"./packages/common/style/mixin.scss";.box{width:px2vw(540);height:px2vh(58);position:relative;}.box.name{position:absolute;font-size:px2font(23);color:#fff;left:0;top:0;}.box.total{position:absolute;left:0;bottom:0;width:100%;height:px2vh(15);//border-radius:px2vh(7);//background-color:#0F3F63;//border:1pxsolidred;display:flex;justify-content:space-between;}.box.value{position:absolute;color:#fff;font-size:px2font(30);right:0;top:0;}.box.valuespan{font-size:px2font(23);}</style>