今天在封装一个个类似于下面这样的进度条组件
功能要求
- 进度条的总格子数可以自定义
- 当前件数的占比和当前蓝色格子数对应
- 格子的蓝色渐变要符合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>以上为个人经验，希望能给大家一个参考，也希望大家多多支持Devmax。