Steps 步骤条 ​

引导用户按照流程完成任务的分步导航条， 可根据实际应用场景设定步骤，步骤不得少于 2 步。

ts
import { createApp } from 'vue'
import { Steps as ElSteps } from '@szhn/dh-design-pc'

const app = createApp()
app.use(ElSteps)

基础用法 ​

简单的步骤条。

<template>
  <el-steps style="max-width: 600px" :active="active" finish-status="success">
    <el-step title="Step 1" />
    <el-step title="Step 2" />
    <el-step title="Step 3" />
  </el-steps>

  <el-button style="margin-top: 12px" @click="next">Next step</el-button>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { Button as ElButton, Step as ElStep, Steps as ElSteps } from '@szhn/dh-design-pc'


const active = ref(0)

const next = () => {
  if (active.value++ > 2) active.value = 0
}
</script>

含状态的步骤条 ​

每一步骤显示出该步骤的状态。

<script setup lang="ts">
import { Step as ElStep, Steps as ElSteps } from '@szhn/dh-design-pc'

</script>

<template>
  <el-steps
    style="max-width: 600px"
    :space="200"
    :active="1"
    finish-status="success"
  >
    <el-step title="Done" />
    <el-step title="Processing" />
    <el-step title="Step 3" />
  </el-steps>
</template>

居中的步骤条 ​

标题和描述可以居中。

<script setup lang="ts">
import { Step as ElStep, Steps as ElSteps } from '@szhn/dh-design-pc'

</script>

<template>
  <el-steps style="max-width: 600px" :active="2" align-center>
    <el-step title="Step 1" description="Some description" />
    <el-step title="Step 2" description="Some description" />
    <el-step title="Step 3" description="Some description" />
  </el-steps>
</template>

带描述的步骤栏 ​

每一步都有描述。

<script setup lang="ts">
import { Step as ElStep, Steps as ElSteps } from '@szhn/dh-design-pc'

</script>

<template>
  <el-steps style="max-width: 600px" :active="1">
    <el-step title="Step 1" description="Some description" />
    <el-step title="Step 2" description="Some description" />
    <el-step title="Step 3" description="Some description" />
  </el-steps>
</template>

带图标的步骤条 ​

可以在步骤栏中使用各种自定义图标。

<template>
  <el-steps style="max-width: 600px" :active="1">
    <el-step title="Step 1" :icon="Edit" />
    <el-step title="Step 2" :icon="Upload" />
    <el-step title="Step 3" :icon="Picture" />
  </el-steps>
</template>

<script lang="ts" setup>
import { Edit, Picture, Upload } from '@szhn/dh-design-pc/icons'
import { Step as ElStep, Steps as ElSteps } from '@szhn/dh-design-pc'

</script>

垂直的步骤条 ​

垂直方向的步骤条。

<script setup lang="ts">
import { Step as ElStep, Steps as ElSteps } from '@szhn/dh-design-pc'

</script>

<template>
  <div style="height: 300px; max-width: 600px">
    <el-steps direction="vertical" :active="1">
      <el-step title="Step 1" />
      <el-step title="Step 2" />
      <el-step title="Step 3" />
    </el-steps>
  </div>
</template>

简洁风格的步骤条 ​

设置 simple 可应用简洁风格，该条件下 align-center / description / direction / space 都将失效。

<template>
  <el-steps
    class="mb-4"
    style="max-width: 600px"
    :space="200"
    :active="1"
    simple
  >
    <el-step title="Step 1" :icon="Edit" />
    <el-step title="Step 2" :icon="UploadFilled" />
    <el-step title="Step 3" :icon="Picture" />
  </el-steps>

  <el-steps style="max-width: 600px" :active="1" finish-status="success" simple>
    <el-step title="Step 1" />
    <el-step title="Step 2" />
    <el-step title="Step 3" />
  </el-steps>
</template>

<script lang="ts" setup>
import { Edit, Picture, UploadFilled } from '@szhn/dh-design-pc/icons'
import { Step as ElStep, Steps as ElSteps } from '@szhn/dh-design-pc'

</script>

Steps API ​

Steps Attributes ​

属性名说明类型默认
space每个 step 的间距，不填写将自适应间距。 支持百分比。number / string''
direction显示方向enumhorizontal
active设置当前激活步骤number0
process-status设置当前步骤的状态enumprocess
finish-status设置结束步骤的状态enumfinish
align-center进行居中对齐boolean—
simple是否应用简洁风格boolean—

Steps Events ​

插槽名说明参数：
change当活动步骤发生变化时触发Function

Steps Slots ​

属性名说明子标签
default默认插槽Step

Step API ​

Step Attributes ​

插槽名说明类型默认
title标题string''
description描述文案string''
iconStep 组件的自定义图标。 也支持 slot 方式写入string / Component—
status设置当前步骤的状态， 不设置则根据 steps 确定状态enum''

Step Slots ​

方法名描述
icon自定义图标
title自定义标题
description自定义描述文案