多边形自定义步骤条

最新推荐文章于 2025-08-09 20:51:19 发布

原创最新推荐文章于 2025-08-09 20:51:19 发布 · 342 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #css #html

在这里插入图片描述

<template>
  <div class="step-bar">
    <div
      v-for="(step, index) in steps"
      :key="index"
      :class="['step', getStepClass(index)]"
      :style="{ padding: `7.5px calc(100% / ${steps?.length || 1} * 0.08)` }"
    >
      {{ step }}
    </div>
  </div>
</template>

<script setup lang="ts">
const props = defineProps({
  steps: {
    type: Array,
    default: () => []
  },
  currentStep: {
    type: Number,
    default: 4
  }
})

// 获取当前步骤的 class
const getStepClass = (index) => {
  if (index < props.currentStep) return "done"
  if (index === props.currentStep) return "active"
  return "todo"
}
</script>

<style scoped>
.step-bar {
  display: flex;
  align-items: center;
  font-size: 14px;
}

.step {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  color: white;
  background-color: #ccc;
  clip-path: polygon(0% 0%, 92% 0%, 100% 50%, 92% 100%, 0% 100%, 8% 50%);
  white-space: nowrap;
  margin-right: -10px;
}
.step:first-child {
  clip-path: polygon(0% 0%, 92% 0%, 100% 50%, 92% 100%, 0% 100%);
}
.step:last-child {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 8% 50%);
}

.step.done {
  background-color: #4362ec;
}

.step.active {
  background-color: #9baef9;
}

.step:last-child.active {
  background-color: #4362ec;
}
.step.todo {
  background-color: #e0e0e0;
  color: #999;
}
</style>