今天在封装一个个类似于下面这样的进度条组件 功能要求 进度条的总格子数可以自定义当前件数的占比和当前蓝色格子数对应格子的蓝色渐变要符合UI设计 这个渐变色的处理浪费了好一会功夫，下
今天在封装一个个类似于下面这样的进度条组件
这个渐变色的处理浪费了好一会功夫，下面看一下我的实现思路，大神勿喷啊，后面给出源码
这里只有名称、总数和当前值
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=[];
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>以上为个人经验，希望能给大家一个参考，也希望大家多多支持编程网。
--结束END--
本文标题: Vue实现渐变色进度条的代码
本文链接: https://www.lsjlt.com/news/147385.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0