如果antd中steps组件中提供的图标有时候能满足我们的要求，参考antd+vue的steps组件在步骤条中添加自定义样式内容（上）

如果antd中steps组件中提供的图标不能满足我们的要求，需要使用自定义的图片来实现，比如实现如下示例：

实现代码如下：

<template>
  <a-row :gutter="24">
    <a-col :md="24">
      <a-card title="步骤条">
        <a-switch
          checked-children="横向"
          un-checked-children="纵向"
          default-checked
          @change="changeDir"
          class="btn-sw"
        />
        <a-steps :current="current - 1" :direction="direction">
          <a-step v-for="(item,index) in steps" :key="index" :title="item.name">
            <!-- <a-icon slot="icon" :type="getIconType(item.type)"></a-icon> -->
            <template slot="icon">
              <img style="width: 24px;" :src="getIconType(item.type, index + 1 < current)">
            </template>
            <span slot="description">
              <li :key="ind" v-for="( ite, ind ) in item.info">
                <p>{{ "用户名：" }}{{ ite.userName }}</p>
                <p>{{ "评价：" }}{{ ite.comment }}</p>
              </li>
            </span>
          </a-step>
          <a-step v-if="steps && steps.length > 0" title="结束">
            <span slot="icon">
              <img style="width: 24px;" :src="getIconType(4, steps.length === current)">
            </span>
          </a-step>
        </a-steps>
      </a-card>
    </a-col>
  </a-row>
</template>

<script>
export default {
  data () {
    return {
      direction: 'horizontal',
      current: 3,
      steps: [
        {
          id: 'sdf',
          name: 'first',
          type: 0,
          info: [{ userName: 'Amily', userId: '001', comment: 'aaaaaaaaaaaaa' }]
        },
        {
          id: 'fgh',
          name: 'second',
          type: 1,
          info: [{ userName: 'Bill', userId: '002', comment: 'aaaaadsaew' }]
        },
        {
          id: 'wrg',
          name: 'third',
          type: 2,
          info: [{ userName: 'Claire', userId: '003', comment: 'fdrewdaaaaa' }]
        },
        {
          id: 'jhm',
          name: 'fourth',
          type: 3,
          info: [{ userName: 'Damon', userId: '004', comment: 'fhghyfaaaa' }]
        }
      ]
    }
  },
  methods: {
    getIconType (type, bool) {
      let src = null
      if (type === 0 && bool === true) {
        src = require('../../assets/images/cake.png')
      } else if (type === 0 && bool === false) {
        src = require('../../assets/images/cake-.png')
      } else if (type === 1 && bool === true) {
        src = require('../../assets/images/bread.png')
      } else if (type === 1 && bool === false) {
        src = require('../../assets/images/bread-.png')
      } else if (type === 2 && bool === true) {
        src = require('../../assets/images/cola.png')
      } else if (type === 2 && bool === false) {
        src = require('../../assets/images/cola-.png')
      } else if (type === 3 && bool === true) {
        src = require('../../assets/images/hotpot.png')
      } else if (type === 3 && bool === false) {
        src = require('../../assets/images/hotpot-.png')
      } else if (type === 4 && bool === true) {
        src = require('../../assets/images/food.png')
      } else if (type === 4 && bool === false) {
        src = require('../../assets/images/food-.png')
      }
      return src
    },
    changeDir (checked) {
      if (checked) {
        this.direction = 'horizontal'
      } else {
        this.direction = 'vertical'
      }
    }
  }
}
</script>
<style lang="less" scoped>
.btn-sw {
  margin-bottom: 20px;
}
/deep/.ant-steps-item-process .ant-steps-item-icon {
    background: transparent;
}
</style>

如果修改current的值，比如修改为4，则steps的图标会更换：

自定义的图标有两组：

如果正在处理的步骤图标需要特别显示，那么需要再增加一组对应的图片，判断显示哪张图片的函数再添加一个参数index + 1 === current，利用这个布尔值来判断即可。