antd+vue的steps组件在步骤条中添加自定义样式内容（上）

步骤条的图标比较单调，需要替换成有特定图标，从图库里选择需要的图标替换上去，改变之前的步骤条：

替换图标之后的步骤条：
核心：
如果antd中steps组件中提供的图标有时候能满足我们的要求，可以使用框架中本身提供的icon来实现：使用slot插槽来实现

实现代码如下：

<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>
            <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-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) {
      let icon = null
      switch (type) {
        case 0:
          icon = 'user'
          break
        case 1:
          icon = 'smile'
          break
        case 2:
          icon = 'edit'
          break
        case 3:
          icon = 'check-circle'
          break
        default:
          icon = null
      }
      return icon
    },
    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>

如果antd中steps组件中提供的图标不能满足我们的要求，需要使用自定义的图片来实现，antd+vue的steps组件在步骤条中添加自定义样式内容（下）