您好,登录后才能下订单哦!
这篇文章主要介绍“Vue如何实现渐变色进度条”,在日常操作中,相信很多人在Vue如何实现渐变色进度条问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Vue如何实现渐变色进度条”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!
进度条的总格子数可以自定义
当前件数的占比和当前蓝色格子数对应
格子的蓝色渐变要符合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=[]; /* 这里用结束时的颜色减掉开始时的颜色得到总色差 然后除以当前的格子数,分成更小的色差值,保留三位小数,并转为数字 然后将每一个格子对应的颜色差值存到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如何实现渐变色进度条”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注亿速云网站,小编会继续努力为大家带来更多实用的文章!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。