# Steps 步骤条

<template>
 <section class="steps-demo">
    <w-steps :active="active1" finish-status="success">
      <w-step title="步骤 1"></w-step>
      <w-step title="步骤 2"></w-step>
      <w-step title="步骤 3"></w-step>
      <w-step title="步骤 4"></w-step>
    </w-steps>
    <w-button style="margin-top: 12px;" @click="next">下一步</w-button>
  </section>
</template>
<script>
export default {
  data () {
    return {
      active1: 0,
    }
  },
  methods: {
    next() {
+      this.active1++
    }
  },
}
</script>

<template>
  <w-steps :active="1" align-center>
    <w-step title="病 历" description="请为患者填写病历"></w-step>
    <w-step title="检 验" description="正在做检验项目"></w-step>
    <w-step title="检 查" description="正在做检查项目"></w-step>
    <w-step title="处 方" description="正在开具处方"></w-step>
  </w-steps>
</template>

<template>
  <w-steps :space="200" :active="0" finish-status="success" lead>
    <w-step title="步骤 1" icon="w-icon-edit"></w-step>
    <w-step title="步骤 2" icon="w-icon-share-link-solid"></w-step>
    <w-step title="步骤 3" icon="w-icon-delete-solid"></w-step>
  </w-steps>
</template>

<template>
  <div style="height: 300px;">
    <w-steps direction="vertical"
      :active="1">
      <w-step title="步骤 1"></w-step>
      <w-step title="步骤 2"></w-step>
      <w-step title="步骤 3"></w-step>
      <w-step title="步骤 4"></w-step>
    </w-steps>
  </div>
</template>

<template>
  <section class="steps-demo">
    <w-steps :active2="active2" process-status="error">
      <w-step title="已完成"></w-step>
      <w-step title="审核失败"></w-step>
      <w-step title="未进行"></w-step>
      <w-step title="未进行"></w-step>
    </w-steps>
  </section>
</template>
<script>
export default {
  data () {
    return {
      active2: 1,
    }
  },
  methods: {
  },
}
</script>