vue手动实现进度条功能

之前写项目的时候遇到一个需要用进度条展示的数据，在组建库里也没找到适合的，就自己写了一个。

 

html部分

<div class="operation" v-for="(v, i) in Ranking" :key="i">
         <div class="wire">
              <div :style="calculate(v.num)"></div>
         </div>
</div>

js部分

Ranking: [
        { name: "左排1灯", num: 20 },
        { name: "左排2灯", num: 18 },
        { name: "前排空调", num: 16 },
        { name: "空调", num: 12 },
        { name: "右排1灯", num: 9 },
        { name: "右排2灯", num: 6 },
      ]

calculate(val) {
      return "width:" + (val / 20) * 100 + "%;";
      }

css部分