Vue如何实现渐变色进度条

这篇文章主要介绍“Vue如何实现渐变色进度条”，在日常操作中，相信很多人在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的宽度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=[];  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>

到此，关于“Vue如何实现渐变色进度条”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注编程网网站，小编会继续努力为大家带来更多实用的文章！