vue结合纯CSS实现蛇形流程图/步骤条

在Vue中结合纯CSS实现蛇形流程图/步骤条，可以通过定义不同的CSS样式类来控制不同阶段的样式，并通过Vue的数据绑定动态更新样式以反映流程的进度。

以下是一个简单的例子，展示如何使用Vue和CSS创建一个蛇形流程图：

<template>
  <div class="process-container">
    <div class="process-step" :class="{ 'active': step >= 1 }">
      <div class="step-circle">1</div>
      <div class="step-description">步骤一</div>
    </div>
    <div class="process-step" :class="{ 'active': step >= 2 }">
      <div class="step-circle">2</div>
      <div class="step-description">步骤二</div>
    </div>
    <!-- 更多步骤... -->
    <div class="process-step" :class="{ 'active': step >= 3 }">
      <div class="step-circle">3</div>
      <div class="step-description">步骤三</div>
    </div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      step: 1, // 当前步骤，1代表第一步完成，2代表第二步完成，以此类推
    };
  },
};
</script>
 
<style scoped>
.process-container {
  display: flex;
  align-items: center;
}
 
.process-step {
  position: relative;
  flex: 1;
  text-align: center;
}
 
.step-circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #eee;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}
 
.active .step-circle {
  background-color: #4caf50;
}
 
.step-description {
  position: absolute;
  top: 70px;
  width: 100%;
}
 
.active .step-description {
  top: 0;
  font-weight: bold;
}
 
/* 添加蛇形流程图的样式 */
.process-step:not(:first-child)::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  height: 100%;
  width: 2px;
  background-color: #eee;
}
 
.active:not(:first-child)::before {
  background-color: #4caf50;
}
 
.process-step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 100%;
  height: 2px;
  width: 50%;
  background-color: #eee;
}
 
.active:not(:last-child)::after {
  background-color: #4caf50;
}
</style>

在这个例子中，.process-step 代表每个流程步骤，.step-circle 和 .step-description 分别代表步骤的序号和描述。:class="{ 'active': step >= X }" 绑定用于根据 step 数据属性的值动态更新样式，显示当前步骤的状态。::before 和 ::after 伪元素用于创造蛇形流程图的弯曲线条。通过调整 step 的值，你可以看到流程图如何随步骤的进展而变化。