步骤条 - Steps

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

基本用法

简单的步骤条,默认当前处于第一步。

1
step1
description1
2
step2
description2
3
step3
description3
4
step4
description
<c-steps>
  <c-step
    v-for="step in stepsData"
    :title="step.title"
    :description="step.description"
    iconPos="top"
    :status="step.status"
  >
  </c-step>
</c-steps>

<script>
export default {
  data() {
    return {
      stepsData : [
        {
          title: 'step1',
          description: 'description1'
        },{
          title: 'step2',
          description: 'description2'
        },{
          title: 'step3',
          description: 'description3'
        },{
          title: 'step4',
          description: 'description'
        }
      ]
    }
  }
}
</script>

设置当前所处步骤

通过给c-steps设置active属性,表示当前处于第几步骤。

1
step1
description1
2
step2
description2
3
step3
description3
<c-steps
  :active="currentActive"
>
  <c-step
    v-for="step in stepsData"
    :title="step.title"
    :description="step.description"
    iconPos="top"
    :status="step.status"
  >
  </c-step>
</c-steps>

<script>
export default {
  data() {
    return {
      currentActive: 2,
      stepsData : [
        {
          title: 'step1',
          description: 'description1'
        },{
          title: 'step2',
          description: 'description2'
        },{
          title: 'step3',
          description: 'description3'
        }
      ]
    }
  }
}
</script>

设置步骤条排列方式

通过c-stepsdirective属性,设置水平或垂直分布,默认水平。

1
step1
description1
2
step2
description2
3
step3
description3
<c-steps
  direction="vertical"
>
  <c-step
    v-for="step in stepsData"
    :title="step.title"
    :description="step.description"
    :status="step.status"
  >
  </c-step>
</c-steps>

<script>
export default {
  data() {
    return {
      stepsData : [
        {
          title: 'step1',
          description: 'description1'
        },{
          title: 'step2',
          description: 'description2'
        },{
          title: 'step3',
          description: 'description3'
        }
      ]
    }
  }
}
</script>

给步骤条添加图标

通过设置c-stepicon属性,添加步骤图标。

step1
description1
step2
description2
step3
description3
<c-steps>
  <c-step
    v-for="step in stepsData"
    :title="step.title"
    :description="step.description"
    :icon="step.icon"
  >
  </c-step>
</c-steps>

<script>
export default {
  data() {
    return {
      stepsData : [
        {
          title: 'step1',
          description: 'description1',
          icon: 'eye'
        },{
          title: 'step2',
          description: 'description2',
          icon: 'film'
        },{
          title: 'step3',
          description: 'description3',
          icon: 'camera'
        }
      ]
    }
  }
}
</script>

设置图标位置

在横向步骤条中,通过c-stepiconPos属性,设置步骤图标位置。left表示图标在左,top表示图标在上。

1
step1
description1
2
step2
description2
3
step3
description3
<c-steps>
  <c-step
    v-for="step in stepsData"
    :title="step.title"
    :description="step.description"
    iconPos="left"
    :status="step.status"
  >
  </c-step>
</c-steps>

<script>
export default {
  data() {
    return {
      stepsData : [
        {
          title: 'step1',
          description: 'description1'
        },{
          title: 'step2',
          description: 'description2'
        },{
          title: 'step3',
          description: 'description3'
        }
      ]
    }
  }
}
</script>

给步骤条添加状态

设置c-stepstatus属性,可为当前步骤添加状态:成功、警告、失败,或loading。可同时设置图标。

1
step1
description1
2
step2
description2
3
step3
description3
4
step4
description4
<c-steps>
  <c-step
    v-for="step in stepsData"
    :title="step.title"
    :description="step.description"
    iconPos="left"
    :status="step.status"
  >
  </c-step>
</c-steps>

<script>
export default {
  data() {
    return {
      stepsData : [
        {
          title: 'step1',
          description: 'description1',
          status: 'success'
        },{
          title: 'step2',
          description: 'description2',
          status: 'loading'
        },{
          title: 'step3',
          description: 'description3',
          status: 'warning'
        },{
          title: 'step4',
          description: 'description4',
          status: 'error'
        }
      ]
    }
  }
}
</script>
step1
description1
step2
description2
step3
description3
<c-steps>
  <c-step
    v-for="step in stepsData"
    :title="step.title"
    :description="step.description"
    :status="step.status"
    :icon="step.icon"
  >
  </c-step>
</c-steps>

<script>
export default {
  data() {
    return {
      stepsData : [
        {
          title: 'step1',
          description: 'description1',
          status: 'success',
          icon: 'check'
        },{
          title: 'step2',
          description: 'description2',
          status: 'loading',
          icon: 'loader'
        },{
          title: 'step3',
          description: 'description3',
          icon: 'clock'
        }
      ]
    }
  }
}
</script>

属性说明

属性 类型 默认值 说明 可选值
title String - 步骤标题 -
description String - 步骤详情 -
icon String - 可添加的icon -
iconPos String top icon相对于title的位置 left / top
status String default 步骤状态 loading / success / warning / error / default