记一次vue组件编写

实现效果：彩色刻度条随着底下5个数值的不同而变换长度，数值和相邻两个进度条缝隙对应，游标随着传入的值不同而变换位置。

分析: 进度条总长度为100%，我们可以根据每一段进度占总体进度条的百分比来进行计算，得出每一段进度的长度，底下的进度数值同理，游标的位置也可进行计算得出百分比。

已知：

  scale: [0, 30, 132, 438, 540, 644],//数值段
  currentValue:200,//当前值

计算：

1. 游标的位置：我们可以用（当前值-最小值）/（最大值-最小值）*100%来计算

//游标的位置
 <img src=""
 :style="{left:`${(currentValue-scale[0])/(scale[5]-scale[0])*100}%`}"
 >

2. 进度条中每一段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>

3. 底下刻度值的位置
   思路：每个值的位置为当前值（当前值就是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>

总结：编写组件时，首先组件是要拿来直接用的，传递的数据要清楚，组件实现的功能要清楚，每一部分之间的联系比如此组件进度条，数值和游标之间都是有联系的，都是随着数值范围的不同随之变化的。