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

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

这篇文章主要介绍了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 SSR 的 Cookies 问题
本篇文章主要介绍了浅谈Vue SSR 的 Cookies 问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-11-11
vue如何解决axios请求前端跨域问题
vue项目中,前端使用axios与后台进行数据请求或者提交的时候,如果后台没有设置跨域,浏览器做数据请求的时候就会报错,这篇文章主要给大家介绍了关于vue如何解决axios请求前端跨域问题的相关资料,需要的朋友可以参考下
2021-10-10
详解vue-cli之webpack3构建全面提速优化
这篇文章主要介绍了详解vue-cli之webpack3构建全面提速优化，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-12-12
详谈vue中router-link和传统a链接的区别
这篇文章主要介绍了详谈vue中router-link和传统a链接的区别，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-07-07
Vue中computed及watch区别实例解析
这篇文章主要介绍了Vue中computed及watch区别实例解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-08-08
Vue 页面监听用户预览时间功能的实现代码
这篇文章主要介绍了Vue 页面如何监听用户预览时间,首先需要借助vue页面的生命周期函数mounted和destroyed，分别加入开始计时和清除计时的逻辑，通过相关操作实现此功能，需要的朋友可以参考下
2021-07-07
vue3在router中使用store报错的完美解决方案
这篇文章主要介绍了vue3在router中使用store报错解决方案,就是需要在实例化一下,因为在编译router的时候pinia还未被实例化,文中补充介绍了vue3中router和store详细使用教程方法,感兴趣的朋友一起看看吧
2023-11-11
vue中json格式化显示数据(vue-json-viewer)
这篇文章主要给大家介绍了关于vue中json格式化显示数据(vue-json-viewer)的相关资料,Vue-json-viewer是一个Vue组件,用于在Vue应用中显示JSON数据的可视化工具,需要的朋友可以参考下
2024-05-05
vue中的echarts实现宽度自适应的解决方案
这篇文章主要介绍了vue中的echarts实现宽度自适应,本文给大家分享实现方案，代码简单易懂，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-09-09
vue搜索高亮popsearch组件的实现示例
有时候给页面内容添加一个关键词搜索功能,如果搜索结果能够像浏览器搜索一样高亮显示,那找起来就会很明显体验会好很多,本文就来介绍一下vue搜索高亮popsearch组件的实现示例,感兴趣的可以了解一下
2023-09-09