vue实战范例——箭头步骤条/导航（含css 斜切skew的妙用）

<template>
  <div>
    <div class="arrowsBox">
      <div class="arrowsItem" v-for="(item, index) in list" :key="index">
        <div
          class="arrows-up arrows"
          :class="{
            arrows_active: item.status === 'active',
            arrows_done: item.status === 'done',
            arrows_todo: item.status === 'todo',
          }"
        ></div>
        <div
          class="arrows-down arrows"
          :class="{
            arrows_active: item.status === 'active',
            arrows_done: item.status === 'done',
            arrows_todo: item.status === 'todo',
          }"
        ></div>
        <div
          class="arrows-label"
          :class="{
            arrows_label_active: item.status === 'active',
            arrows_label_done: item.status === 'done',
            arrows_label_todo: item.status === 'todo',
          }"
        >
          {{ item.label }}
        </div>
      </div>
    </div>

    <button v-if="unFinish" @click="next" class="btn">下一步</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      unFinish: true,
      list: [
        {
          label: "1-规则说明",
          prop: "1",
          status: "done",
        },
        {
          label: "2-参与活动",
          prop: "2",
          status: "done",
        },
        {
          label: "3-参与抽奖",
          prop: "3",
          status: "active",
        },
        {
          label: "4-奖品发放",
          prop: "4",
          status: "todo",
        },
        {
          label: "5-查看结果",
          prop: "5",
          status: "todo",
        },
      ],
    };
  },
  methods: {
    next() {
      for (let item of this.list) {
        if (item.status === "active") {
          item.status = "done";
        }

        if (item.status === "todo") {
          item.status = "active";
          if (this.list[this.list.length - 1].status === "active") {
            this.unFinish = false;
          }
          break;
        }
      }
    },
  },
};
</script>
<style scoped>
.arrowsBox {
  display: flex;
  justify-content: center;
  height: 40px;
  margin: 20px;
  font-weight: bold;
}
.arrowsItem {
  position: relative;
  height: 100%;
  width: 140px;
  margin-right: 10px;
}
.arrows-up {
  transform: skewX(30deg);
}
.arrows-down {
  transform: skewX(-30deg);
}
.arrows {
  height: 50%;

  background: gray;
}

.arrows-label {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  right: 0;
  bottom: 0;
  text-align: center;
}
.arrows_done {
  background: #edf9ff;
}
.arrows_active {
  background: #009fe9;
}
.arrows_todo {
  background: #ebedf0;
}

.arrows_label_done {
  color: #009fe9;
}
.arrows_label_active {
  color: #fff;
}
.arrows_label_todo {
  color: #929393;
}
.btn {
  background: #009fe9;
  color: #fff;
  border: none;
  padding: 6px;
  width: 100px;
  border-radius: 4px;
  margin: auto;
  display: block;
}
</style>