Steps 步骤条

用于引导用户按照流程完成任务的导航条。

基础用法

简单的步骤条

<at-steps :current='current'>
  <at-step title="Step1" description="This is a description."></at-step>
  <at-step title="Step2" description="This is a description."></at-step>
  <at-step title="Step3"></at-step>
</at-steps>
<at-button type="primary" @click="prev" style="margin-top: 12px;">Prev</at-button>
<at-button type="primary" @click="next" style="margin-top: 12px;">Next</at-button>

迷你版

迷你版的步骤条

<at-steps size="small" :current='current'>
  <at-step title="Step1" description="This is a description."></at-step>
  <at-step title="Step2" description="This is a description."></at-step>
  <at-step title="Step3"></at-step>
</at-steps>
<at-button type="primary" @click="prev" style="margin-top: 12px;">Prev</at-button>
<at-button type="primary" @click="next" style="margin-top: 12px;">Next</at-button>

带图标的步骤条

通过设置 Step 的 icon 属性，可自定义图标。

<at-steps :current='current'>
  <at-step title="Step1" description="This is a description." icon="icon-user"></at-step>
  <at-step title="Step2" description="This is a description." icon="icon-airplay"></at-step>
  <at-step title="Step3" icon="icon-pocket"></at-step>
</at-steps>
<at-button type="primary" @click="prev" style="margin-top: 12px;">Prev</at-button>
<at-button type="primary" @click="next" style="margin-top: 12px;">Next</at-button>

步骤切换

配合内容及按钮使用，表示一个流程的处理进度。

<at-steps :current='current'>
  <at-step v-for="(step, index) in steps"
    :title="step.title"
    :key="index"></at-step>
</at-steps>
<div class="steps-content" style="margin-top: 16px; border: 1px solid #e9e9e9; border-radius: 6px;background-color: #fafafa; min-height: 200px; text-align: center; padding-top:80px;">
  {{ steps[current].content }}
</div>
<at-button type="primary" @click="prev" style="margin-top: 12px;">Prev</at-button>
<at-button type="primary" @click="next" style="margin-top: 12px;">Next</at-button>
<script>
  export default {
    data() {
      return {
        current: 0,
        steps: [{
          title: 'First',
          content: 'First-content'
        }, {
          title: 'Second',
          content: 'Second-content'
        }, {
          title: 'Last',
          content: 'Last-content'
        }]
      }
    },
    methods: {
      prev () {
        if (this.current-- <= 0)
          this.current = 0
      },
      next () {
        if (this.current++ >= 2)
          this.current = 2
      }
    }
  }
</script>

竖直方向的步骤条

简单的竖直方向的步骤条

<at-steps :current='current' direction="vertical">
  <at-step title="Step1" description="This is a description."></at-step>
  <at-step title="Step2" description="This is a description."></at-step>
  <at-step title="Step3" description="This is a description."></at-step>
</at-steps>
<at-button type="primary" @click="prev" style="margin-top: 12px;">Prev</at-button>
<at-button type="primary" @click="next" style="margin-top: 12px;">Next</at-button>

竖直方向的小型步骤条

简单的竖直方向的小型步骤条。

<at-steps :current='current' size="small" direction="vertical">
  <at-step title="Step1" description="This is a description."></at-step>
  <at-step title="Step2" description="This is a description."></at-step>
  <at-step title="Step3" description="This is a description."></at-step>
</at-steps>
<at-button type="primary" @click="prev" style="margin-top: 12px;">Prev</at-button>
<at-button type="primary" @click="next" style="margin-top: 12px;">Next</at-button>

步骤运行错误

使用 Steps 的 status 属性来指定当前步骤的状态。

<at-steps :current='current' status="error">
  <at-step title="Step1" description="This is a description."></at-step>
  <at-step title="Step2" description="This is a description."></at-step>
  <at-step title="Step3"></at-step>
</at-steps>
<at-button type="primary" @click="prev" style="margin-top: 12px;">Prev</at-button>
<at-button type="primary" @click="next" style="margin-top: 12px;">Next</at-button>

Steps 参数

Steps.Step 参数