---
nav: default
---
### Steps
<img width="100" src="http://qr.topscan.com/api.php?text=demo%2F%23%2Fcomponent%2Fsteps"/>
<a href="demo/#/component/steps" target="_blank" style="font-size:12px;color:#888;">demo 原始链接：demo/#/component/steps</a>


---
#### 演示
<div style="width:377px;height:667px;display:inline-block;border:1px dashed #ececec;border-radius:5px;overflow:hidden;">
<iframe src="demo/#/component/steps" width="375" height="667" border="0" frameborder="0"></iframe>
</div>
#### demo 代码

``` html
<template>
  <steps
    :steps="steps"
    :fr-key="'operated_at'"
  >
    <div
      v-if="step.operator_name"
      slot-scope="{ step }"
    >
      <p>经手：{{ step.operator_name }}（{{ step.role_names }}）</p>
      <p>
        电话：<a
          :href="`tel:${step.mobile}`"
          class="i_phone"
        >{{ step.mobile }}</a>
      </p>
      <p v-if="step.review_note">
        备注：{{ step.review_note }}
      </p>
    </div>
  </steps>
</template>

<script>
import { Steps } from '../components/_index'

export default {
  components: {
    Steps
  },
  data () {
    return {
      steps: [{ // 按时间排序，一共最多有三个这样的对象
        'status': 'approved',
        'title': '发起人',
        'operator_id': 1, // 出库申请人id/二手车经理id/财务id
        'operator_name': '莱昂纳多', // 申请人名/二手车经理名/财务名
        'operated_at': '2018-6-20 08:08', // 操作时间
        'role_names': '二手车评估师/二手车经理/财务', // 角色权限，可能很长一串
        'mobile': 13100000000, // 联系电话
        'review_note': '这是审核意见这是审核意见这是审核意见这是审核意见这是审核意见这是审核意见' // 二手车经理和财务审核时的备注
      }, { // 按时间排序，一共最多有三个这样的对象
        'status': 'rejected',
        'title': '财务驳回',
        'operator_id': 1, // 出库申请人id/二手车经理id/财务id
        'operator_name': '莱昂纳多', // 申请人名/二手车经理名/财务名
        'operated_at': '2018-6-20 08:08', // 操作时间
        'role_names': '二手车评估师/二手车经理/财务', // 角色权限，可能很长一串
        'mobile': 13100000000, // 联系电话
        'review_note': '这是审核意见' // 二手车经理和财务审核时的备注
      }, { // 按时间排序，一共最多有三个这样的对象
        'status': 'pending_review',
        'title': '待经理审核',
        'operator_id': 1, // 出库申请人id/二手车经理id/财务id
        'operator_name': '莱昂纳多', // 申请人名/二手车经理名/财务名
        'operated_at': '2018-6-20 08:08', // 操作时间
        'role_names': '二手车评估师/二手车经理/财务', // 角色权限，可能很长一串
        'mobile': 13100000000, // 联系电话
        'review_note': '这是审核意见' // 二手车经理和财务审核时的备注
      }, { // 按时间排序，一共最多有三个这样的对象
        'status': 'not_started',
        'title': '已完成'
      }]
    }
  },
  methods: {}
}
</script>

```

#### Github Issue