vue手动实现进度条功能

最新推荐文章于 2024-09-13 08:12:20 发布

欲行昭昭天命

最新推荐文章于 2024-09-13 08:12:20 发布

阅读量474

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/lalunr/article/details/129562514

版权

本文介绍了如何在Vue.js项目中手动实现一个进度条功能，包括HTML布局、JavaScript逻辑和CSS样式，为没有找到合适组件的情况下提供解决方案。

摘要由CSDN通过智能技术生成

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

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部分