Vue实现两张图片叠加的进度条效果

前言：开发的时候遇到一个进度条实现的问题，和普通的进度条不一样，不是那种常规的进度条。形状有点不规范。如下

• 常规的进度条可以直接用组件库来实现，而像这种进度条，最好的方法就是让UI把进度条满格的整条切出来，并且把底图全部切出来，利用一个变量来控制要显示的进度的width。

实现方法

• 先看html相关的代码，css用到了tailwind的写法。
• 主要有三个盒子，最外层的div是底图，为第一层
• 然后是其第二层，控制进度主要通过控制第二层的width的百分比+overflow-x-hidden来实现
• 然后是第三层，也就是最底层，是固定width和height的进度条，也就是上图中的黄色那条

架构简图

实例代码

<!-- 这里是进度 -->
<div class="w-619 h-29 mt-8 progress relative">
  <!-- 这里才是要变化的长度， -->
  <div
    class="max-w-605 h-full relative overflow-hidden w-605"
    style="width: 78%"
  >
    <!-- 这里才是进度条 -->
    <div
      class="w-605 h-13 pro absolute top-8 bottom-7 left-8 right-6"
    ></div>
  </div>
</div>

注意：第二层必须为relative布局，最底层必须为absolute

• 然后是css部分

.progress {
  background: url(../../assets/img/progress.png) 0 0 no-repeat;
  background-size: cover;
}
.pro {
  background: url(../../assets/img/pro.png) 0 0 no-repeat;
  background-size: cover;
}

实现效果