Vue实现渐变色进度条的代码

今天在封装一个个类似于下面这样的进度条组件

功能要求

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

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

格子的蓝色渐变要符合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]}) ` }

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

<dataItem name="这里应该是当前的数据名称" total=1267 value=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=this       this.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>

以上为个人经验,希望能给大家一个参考,也希望大家多多支持易知道(ezd.cc)。

推荐阅读