vant/packages/steps/src/step.vue

<template>
  <div class="van-step" :class="statusClass">
    <div class="van-step__circle-container">
      <i class="van-step__circle" v-if="status !== 'process'"></i>
      <i class="van-icon van-icon-checked" v-else></i>
    </div>
    <p class="van-step__title">
      <slot></slot>
    </p>
    <div class="van-step__line"></div>
  </div>
</template>

<script>
export default {
  name: 'van-step',

  beforeCreate() {
    this.$parent.steps.push(this);
  },

  computed: {
    status() {
      const index = this.$parent.steps.indexOf(this);
      const active = this.$parent.active;

      if (index < active) {
        return 'finish';
      } else if (index === active) {
        return 'process';
      }
    },
    statusClass() {
      const status = this.status;
      return status ? 'van-step--' + status : '';
    }
  }
};
</script>