icon: ''
tags:
  en:
    - steps
  zh-CN:
    - 流程图
extra:
  en: |

    ```html
      <steps :steps="steps" :fr-key="'operated_at'">
        <div slot-scope="{ step }" v-if="step.operator_name">
          <p>经手：{{step.operator_name}}（{{step.role_names}}）</p>
        </div>
      </steps>
    ```
    `steps` must be an array, including an attribute named title and Customizing an attribute named title to display four states:
            pending_review, approved, rejected, not_started

    `fr-key`: must be a string, Customizing the top right corner

    ``` js
    const steps = [{
      status: 'pending_review',
      title: '通过',
      operator_name: '2018-10-15',
      role_names: '2018-10-15',
      operated_at: '2018-15-15'
    }, {
      status: 'approved',
      title: '通过',
      operator_name: '2018-10-15',
      role_names: '2018-10-15',
      operated_at: '2018-15-15'
    }, {
      status: 'rejected',
      title: '通过',
      operator_name: '2018-10-15',
      role_names: '2018-10-15',
      operated_at: '2018-15-15'
    }]
    ```
  zh-CN: |

    ```html
      <steps :steps="steps" :fr-key="'operated_at'">
        <div slot-scope="{ step }" v-if="step.operator_name">
          <p>经手：{{step.operator_name}}（{{step.role_names}}）</p>
        </div>
      </steps>
    ```
    `steps` 必须是一个数组，每项必须包含字段title显示标题和status，显示四种状态: 没开始 等待中，已通过，已拒绝

    `fr-key`: 必须是string, 自定义动态显示右上角的内容

    ``` js
    const steps = [{
      status: 'pending_review',
      title: '通过',
      operator_name: '2018-10-15',
      role_names: '2018-10-15',
      operated_at: '2018-15-15'
    }, {
      status: 'approved',
      title: '通过',
      operator_name: '2018-10-15',
      role_names: '2018-10-15',
      operated_at: '2018-15-15'
    }, {
      status: 'rejected',
      title: '通过',
      operator_name: '2018-10-15',
      role_names: '2018-10-15',
      operated_at: '2018-15-15'
    }]
    ```
props:
  steps:
    type: Array
    en: review list, can be an array with `title & status`
    zh-CN: 审核流程列表, 每项必须包含字段title显示标题和status
  title:
    type: String
    default: 审核流程
    en: the title of steps
    zh-CN: 流程图的标题
  frKey:
    type: String
    default: ''
    en: the top right corner
    zh-CN: 右上角可填写的内容
changes:
  v1.3.1:
    en:
      - '[enhance] new a steps'
    zh-CN:
      - '[enhance] 新增steps'