Vue實現(xiàn)漸變色進(jìn)度條的代碼

更新時間：2022年04月26日 10:44:44 作者：油炸皮卡丘

這篇文章主要介紹了Vue實現(xiàn)漸變色進(jìn)度條的代碼，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

今天在封裝一個個類似于下面這樣的進(jìn)度條組件

功能要求

進(jìn)度條的總格子數(shù)可以自定義
當(dāng)前件數(shù)的占比和當(dāng)前藍(lán)色格子數(shù)對應(yīng)
格子的藍(lán)色漸變要符合UI設(shè)計

這個漸變色的處理浪費(fèi)了好一會功夫，下面看一下我的實現(xiàn)思路，大神勿噴啊，后面給出源碼

首先確定props里面的值

即組件需要接收的值

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

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

然后就是主要的實現(xiàn)方法，這里接收一個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.計算出每個格子的寬度
        let cubeWidth=Math.floor((totalDomWidth/cubeCount)-1);         
    },
  },

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

接著，根據(jù)每個格子的寬度，以及格子的數(shù)量，動態(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ù)值占了幾個格子,這里也是向下取整

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

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

let startColor=[16,139,247]; //RGB(16,139,247)
let endColor=[15,218,250]; //RGB(15,218,250)
let perDiffColor=[];
/*
	這里用結(jié)束時的顏色減掉開始時的顏色得到總色差
    然后除以當(dāng)前的格子數(shù)，分成更小的色差值，保留三位小數(shù)，并轉(zhuǎn)為數(shù)字
    然后將每一個格子對應(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>

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: