Vue3手写steps步骤条

实现效果

直接上代码

<template>
  <div class="m-steps-area">
    <div class="m-steps">
      <div
        :class="[
          'm-steps-item',
          {
            finished: current > n,
            process: current === n && n !== totalSteps,
            'last-process': current === totalSteps && n === totalSteps,
            'middle-wait': current < n && n !== totalSteps,
            'last-wait': current < n && n === totalSteps,
          },
        ]"
        v-for="n in totalSteps"
        :key="n"
        @click="onChange(n)"
      >
        <div class="m-steps-icon">
          <span class="u-icon">{
  
  { n }}</span>
        </div>
        <div class="m-steps-content">
          <div class="u-steps-title">{
  
  { stepsLabel[n - 1] || 'Title' + n }}</div>
        </div>
      </div>
    </div>
    <el-button @click="onChange('back')">上一步</el-button>
    <el-button @click="onChange('next')">下一步</el-button>
  </div>
</template>
<script setup>
import { ref } from 'vue'
const props = defineProps({
  stepsLabel: {
    // 步骤title数组
    type: Array,
    default: () => {
      return []
    },
  },
  stepsDesc: {
    // 步骤description数组
    type: Array,
    default: () => {
      return []
    },
  },
  totalSteps: {
    // 总的步骤数
    type: Number,
    default: 5,
  },
  currentStep: {
    // 当前选