今天在封装一个个类似于下面这样的进度条组件
功能要求
进度条的总格子数可以自定义当前件数的占比和当前蓝色格子数对应格子的蓝色渐变要符合UI设计
这个渐变色的处理浪费了好一会功夫，下面看一下我的实现思路，大神勿喷啊，后面给出源码
首先确定props里面的值，即组件需要接收的值
这里只有名称、总数和当前值
props:{name:{type:String,default:()=>('数据名称')},total:{type:Number,default:()=>(24)},value:{type:Number,default:()=>(18)},},
然后就是主要的实现方法，这里接收一个cubeCount作为参数，即需要定义总格子数是多少
methods:{initStatus(cubeCount){//1.拿到总格子数div的宽度let totalDomWidth=this.$refs.total.offsetWidth; //2.算出当前格子的比率let ratio=(this.value/this.total); //3.计算出每个格子的宽度let cubeWidth=Math.floor((totalDomWidth/cubeCount)-1); },},
在计算每个格子的宽度的时候，用了Math.floor向下取整,至于后面的-1,是格子之间的间距
接着，根据每个格子的宽度，以及格子的数量，动态生成总的格子，插入到div中
for(let i=0;i<cubeCount;i++){let cubeDom=document.createElement('span'); cubeDom.style.background='#0F3D61'cubeDom.style.width=cubeWidth+'px' this.$refs.total.appendChild(cubeDom)}
接着根据之前算的比率算出当前的数值占了几个格子,这里也是向下取整
let nowCubeCount=Math.floor(cubeCount*ratio);
然后就是比较头痛的渐变色处理，这里我只取了第一个格子和最后一个格子的颜色,利用数组计算差值
let startColor=[16,139,247]; //RGB(16,139,247)let endColor=[15,218,250]; //RGB(15,218,250)let perDiffColor=[];/*这里用结束时的颜色减掉开始时的颜色得到总色差然后除以当前的格子数，分成更小的色差值，保留三位小数，并转为数字然后将每一个格子对应的颜色差值存到perDiffColor数组*/ for(let i=0;i<endColor.length;i++){perDiffColor.push( Number(((endColor[i]-startColor[i])/nowCubeCount).toFixed(3)))}
接着,给当前的格子数设置背景色，即初始的颜色+前格子的下标*每一份的颜色差值,这样组件就大致完成了
//拿到之前全部格子数cubeDomArr=this.$refs.total.children; //给当前的格子设置颜色for(let i=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><div class="box"><div class="name" >{{name}}</div><div class="value" >{{value}}<span>件</span></div><div class="total" ref="total"></div></div></template><script>export default {name: "dataItem",props:{name:{type:String,default:()=>('数据名称')},total:{type:Number,default:()=>(24)},value:{type:Number,default:()=>(18)},},data(){return{};},mounted(){let that=thisthis.initStatus(16); },updated() {this.initStatus(16);},methods:{initStatus(cubeCount){let that=this;let totalDomWidth=this.$refs.total.offsetWidth; let ratio=(this.value/this.total);let cubeWidth=Math.floor((totalDomWidth/cubeCount)-1); let cubeDomArr;for(let i=0;i<cubeCount;i++){let cubeDom=document.createElement('span'); cubeDom.style.background='#0F3D61'cubeDom.style.width=cubeWidth+'px' this.$refs.total.appendChild(cubeDom)}let nowCubeCount=Math.floor(cubeCount*ratio); cubeDomArr=this.$refs.total.children; let startColor=[16,139,247]; let endColor=[15,218,250];let perDiffColor=[];for(let i=0;i<endColor.length;i++){perDiffColor.push( Number(((endColor[i]-startColor[i])/nowCubeCount).toFixed(3)))}for(let i=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><style lang="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: 1px solid red;display: flex;justify-content: space-between;}.box .value{position: absolute;color: #fff;font-size: px2font(30);right: 0;top: 0;}.box .value span{font-size: px2font(23);}</style>
