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=[];
/*
	這里用結束時的顏色減掉開始時的顏色得到總色差
    然后除以當前的格子數，分成更小的色差值，保留三位小數，并轉為數字
    然后將每一個格子對應的顏色差值存到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如何實現漸變色進度條”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！