Vue如何實(shí)現(xiàn)漸變色進(jìn)度條

這篇文章主要介紹“Vue如何實(shí)現(xiàn)漸變色進(jìn)度條”，在日常操作中，相信很多人在Vue如何實(shí)現(xiàn)漸變色進(jìn)度條問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對(duì)大家解答”Vue如何實(shí)現(xiàn)漸變色進(jìn)度條”的疑惑有所幫助！接下來，請(qǐng)跟著小編一起來學(xué)習(xí)吧！

功能要求

• 進(jìn)度條的總格子數(shù)可以自定義

• 當(dāng)前件數(shù)的占比和當(dāng)前藍(lán)色格子數(shù)對(duì)應(yīng)

• 格子的藍(lán)色漸變要符合UI設(shè)計(jì)

首先確定props里面的值

即組件需要接收的值

這里只有名稱、總數(shù)和當(dāng)前值

props:{
  name:{
    type:String,
    default:()=>('數(shù)據(jù)名稱')
  },
  total:{
    type:Number,
    default:()=>(24)
  },
  value:{
    type:Number,
    default:()=>(18)
  },
},

然后就是主要的實(shí)現(xiàn)方法，這里接收一個(gè)cubeCount作為參數(shù)，即需要定義總格子數(shù)是多少

methods:{
    initStatus(cubeCount){
    	//1.拿到總格子數(shù)div的寬度
		let totalDomWidth=this.$refs.total.offsetWidth; 
        //2.算出當(dāng)前格子的比率
        let ratio=(this.value/this.total);       
        //3.計(jì)算出每個(gè)格子的寬度
        let cubeWidth=Math.floor((totalDomWidth/cubeCount)-1);         
    },
  },

在計(jì)算每個(gè)格子的寬度的時(shí)候，用了Math.floor向下取整,至于后面的-1,是格子之間的間距

接著，根據(jù)每個(gè)格子的寬度，以及格子的數(shù)量，動(dòng)態(tài)生成總的格子，插入到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)
}

接著根據(jù)之前算的比率算出當(dāng)前的數(shù)值占了幾個(gè)格子,這里也是向下取整

let nowCubeCount=Math.floor(cubeCount*ratio);

然后就是比較頭痛的漸變色處理，這里我只取了第一個(gè)格子和最后一個(gè)格子的顏色,利用數(shù)組計(jì)算差值

let startColor=[16,139,247]; //RGB(16,139,247)
let endColor=[15,218,250]; //RGB(15,218,250)
let perDiffColor=[];
/*
	這里用結(jié)束時(shí)的顏色減掉開始時(shí)的顏色得到總色差
    然后除以當(dāng)前的格子數(shù)，分成更小的色差值，保留三位小數(shù)，并轉(zhuǎn)為數(shù)字
    然后將每一個(gè)格子對(duì)應(yīng)的顏色差值存到perDiffColor數(shù)組
*/ 
 
for(let i=0;i<endColor.length;i++){
  perDiffColor.push( Number(((endColor[i]-startColor[i])/nowCubeCount).toFixed(3)))
}

接著,給當(dāng)前的格子數(shù)設(shè)置背景色，即初始的顏色+前格子的下標(biāo)*每一份的顏色差值,這樣組件就大致完成了

//拿到之前全部格子數(shù)
cubeDomArr=this.$refs.total.children;   
//給當(dāng)前的格子設(shè)置顏色
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="這里應(yīng)該是當(dāng)前的數(shù)據(jù)名稱"
     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:()=>('數(shù)據(jù)名稱')
      },
      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>

到此，關(guān)于“Vue如何實(shí)現(xiàn)漸變色進(jìn)度條”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！