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]})`
}

然后去使用看看,效果如下：

    <dataItemname="这里应该是当前的数据名称"total=1267value=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=thisthis.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实现渐变色进度条相关推荐

Java渐变进度条_Android ProgressBar自定义图片进度，自定义渐变色进度条
java.lang.Object ↳android.view.View ↳android.widget.ProgressBar 直接子类 AbsSeekBar 间接子类 RatingBar, Seek ...
vue 视频时间进度条组件
vue 视频时间进度条组件有些视频是以视频流的形式进行渲染的,没有视频滚动条,所以就写了24h的时间组件实现思路: 1,24h的时间刻度线总宽度为12960px 2,点击24h线的某一点,获取这 ...
vue 视频时间进度条组件-使用npm组件
vue 视频时间进度条组件有些视频是以视频流的形式进行渲染的,没有视频滚动条,所以就写了24h的时间组件组件已上传到npm上,npm i as-time-line下载安装即可,最少需要1.2.0 ...
【vue自定义组件】渐变色进度条组件
前言佛祖保佑, 永无bug.Hello 大家好!我是海的对岸! 当时UI给的原型图说要弄这个,看了一下,不难,那就弄下,现在把这个记录下来. 实现过程先看效果实现原理总体思路就是这个组件根据传 ...
vue 圆形百分比进度条_快速构建一个圆形的进度条
在一些特别生的网站上,用户需要一个可视化的是示,以表明网站资源仍然在加载.从Spinner到Skeleton屏幕有不同的方法来解决这类的用户体验效果. 如果我们使用的是开箱即用的解决方案,它为我们提供 ...
VUE“粘性”阅读进度条
这个进度条是网上一个实例,原实例使用jQuery实现的查看,最近在用vue-cli,所以就用vue实现该组件查看. 这个进度条有有意思的地方是:用户的一系列操作都和导航息息相关.一般来说,普通的导航, ...
Vue 圆圈形进度条
圆圈形进度条在开发中经常遇到,这里把他封装成一个组件,实现方式为使用svg画图. 下面的代码中涉及到了svg的viewBox属性,按照张鑫旭大神的说法:SVG就像是我们的显示器屏幕,viewBox就是 ...
Vue使用NProgress进度条 zindex
1.安装 npm i -S nprogress 2.在router.js中使用 import Vue from 'vue' import Router from 'vue-router' import ...
Vue + Element 实现进度条 Progress
Vue + Element 进度条 Progress 前言:由于在公司可视化数字大屏项目中用到了,所以在博客里记录一下!如果能帮到你,那么点个赞吧,哈哈哈话不多说,先直接上效果图,有需要的大家可借鉴 ...

Vue实现渐变色进度条

首先确定props里面的值，即组件需要接收的值

Vue实现渐变色进度条相关推荐

最新文章

热门文章