vue3.0 + antdv3.x 步骤条改造

<template>
  <div id="wl-step">
    <a-steps :current="activeIndex" labelPlacement="vertical">
      <a-step v-for="(item, index) in steps" :key="index">
        <template #icon>
          <img :src="getImg(item, index)" style="width: 40px; height: 40px" />
        </template>
        <template #title>{{ item.title }}</template>
        <template #description>
          <span>{{ item.description }}</span>
        </template>
      </a-step>
    </a-steps>
  </div>
</template>
<script setup>
import img0 from '@/assets/wl/0.png'
import img00 from '@/assets/wl/0-0.png'
import img01 from '@/assets/wl/0-1.png'
import img1 from '@/assets/wl/1.png'
import img10 from '@/assets/wl/1-0.png'
import img11 from '@/assets/wl/1-1.png'
import img2 from '@/assets/wl/2.png'
import img20 from '@/assets/wl/2-0.png'
import img21 from '@/assets/wl/2-1.png'
import img3 from '@/assets/wl/3.png'
import img30 from '@/assets/wl/3-0.png'
import img31 from '@/assets/wl/3-1.png'
import img4 from '@/assets/wl/4.png'
import img40 from '@/assets/wl/4-0.png'
import img41 from '@/assets/wl/4-1.png'
import { onMounted } from 'vue'
const { proxy } = getCurrentInstance()
const activeIndex = 2
const steps = ref([
  {
    title: '订单接入',
    description: '2023-04-17 08:09:10',
    icon: {
      normal: img0,
      passed: img00,
      current: img01
    }
  },
  {
    title: '订单审核',
    description: '2023-04-17 08:09:10',
    icon: {
      normal: img1,
      passed: img10,
      current: img11
    }
  },
  {
    title: '仓库出库',
    description: '2023-04-17 08:09:10',
    icon: {
      normal: img2,
      passed: img20,
      current: img21
    }
  },
  {
    title: '等待收货',
    description: '2023-04-17 08:09:10',
    icon: {
      normal: img3,
      passed: img30,
      current: img31
    }
  },
  {
    title: '完成',
    description: '2023-04-17 08:09:10',
    icon: {
      normal: img4,
      passed: img40,
      current: img41
    }
  }
])
function getImg(item, index) {
  const { normal, current, passed } = item.icon
  if (index < activeIndex) {
    return passed
  }
  if (index === activeIndex) {
    return current
  }
  return normal
}
function getBeforeEl() {
  const pEl = document.getElementById('wl-step')
  const cEl = pEl.querySelector('.ant-steps-item-active')
  const beforeEl = cEl.previousElementSibling
  beforeEl.classList.add('active-before-step')
}
onMounted(() => {
  getBeforeEl()
})
</script>
<style lang="scss">
#wl-step {
  .ant-steps-label-vertical {
    .ant-steps-item-content {
      width: 140px;
    }
  }
  .ant-steps-item-tail {
    position: relative;
    top: 24px;
    &::before {
      position: absolute;
      top: 0;
      right: 23px;
      content: '';
      border-top: 5px solid transparent;
      border-bottom: 5px solid transparent;
      border-left: 10px solid #e5e5e5;
    }
  }
  .ant-steps-item-tail::after {
    border: 1px dashed #e5e5e5;
    background: transparent;
  }
  .ant-steps-item-finish {
    .ant-steps-item-tail::after {
      border-color: #2ecb06;
      background-color: transparent;
    }
    .ant-steps-item-tail::before {
      border-left-color: #2ecb06;
    }
  }
  .active-before-step {
    .ant-steps-item-tail::after {
      border-color: #1684fc;
    }
    .ant-steps-item-tail::before {
      border-left-color: #1684fc;
    }
  }
}
</style>

说明：
本示例 使用的本地图片作为icon（网页搜 iconfont） 也可以使用 在线icon 或者 ant-design-vue  icon
本地 根据不同状态 使用不同的颜色