实现效果:彩色刻度条随着底下5个数值的不同而变换长度,数值和相邻两个进度条缝隙对应,游标随着传入的值不同而变换位置。
分析: 进度条总长度为100%,我们可以根据每一段进度占总体进度条的百分比来进行计算,得出每一段进度的长度,底下的进度数值同理,游标的位置也可进行计算得出百分比。
已知:
scale: [0, 30, 132, 438, 540, 644],//数值段
currentValue:200,//当前值
计算:
- 游标的位置:我们可以用(当前值-最小值)/(最大值-最小值)*100%来计算
//游标的位置
<img src=""
:style="{left:`${(currentValue-scale[0])/(scale[5]-scale[0])*100}%`}"
>
- 进度条中每一段div的长度
思路:一共有5段进度条,我们的scale有6个,第一段进度条的长度应该是scale的idx+1。
首先我们在data中用colors存放所有进度条的颜色
colors:['#FA607E','#FAAD14','#35CA98','#FAAD14','#FA607E']
接着我们在计算属性computed中得到5个值
computed:{
parts() {
return this.scale.slice(1);
},
},
每一段进度条的长度计算:
思路:先得到当前进度条的长度,然后算出当前进度条占总长的百分比。
calcWidth(inx){
//当前进度条长度
const val = this.scale[inx+1] -this.scale[inx]
//返回当前长度所占百分比
return `${(val-this.scale[0])/(this.scale[5]-this.scale[0])*100}%`
},
循环div得到所有进度条的长度
<div class="threshold"
v-for="(val,inx) in parts" :key="`th-${val}`"
:style="{backgroundColor:colors[inx],width:calcWidth(inx)}"
></div>
- 底下刻度值的位置
思路:每个值的位置为当前值(当前值就是scale中对应的每一个值)所占总值的百分比,然后把它左移50%和上面缝隙对应。
calcNumLeft(inx){
//当前值
const val = this.scale[inx];
//返回所占百分比
return `${(val-this.scale[0])/(this.scale[5]-this.scale[0])*100}%`
},
<div class="num">
<span v-for="(item,inx) in scale" :key="item"
:style="{left:calcNumLeft(inx)}"
>{{item}}</span>
</div>
总结:编写组件时,首先组件是要拿来直接用的,传递的数据要清楚,组件实现的功能要清楚,每一部分之间的联系比如此组件进度条,数值和游标之间都是有联系的,都是随着数值范围的不同随之变化的。