el-steps详解

el-steps 是 Element Plus 框架中的一个步骤条组件，用于引导用户完成一系列操作步骤。它可以帮助用户清晰地了解当前所处的操作步骤以及剩余的步骤。

一。 el-steps 属性详解

1. active:

   • 类型: Number
   • 用途: 当前步骤。
   • 默认值: 0

2. direction:

   • 类型: String
   • 用途: 步骤条的方向，可选值为 horizontal 或 vertical。
   • 默认值: horizontal

3. align-center:

   • 类型: Boolean
   • 用途: 是否居中对齐。
   • 默认值: false

4. center:

   • 类型: Boolean
   • 用途: 是否居中对齐（与 align-center 相同）。
   • 默认值: false

5. finish-status:

   • 类型: String
   • 用途: 已完成步骤的状态，可选值为 wait、process、finish、error、success。
   • 默认值: finish

6. process-status:

   • 类型: String
   • 用途: 当前步骤的状态，可选值为 wait、process、finish、error、success。
   • 默认值: process

7. space:

   • 类型: Number | String
   • 用途: 步骤之间的间距。
   • 默认值: —

8. simple:

   • 类型: Boolean
   • 用途: 是否使用简洁风格。
   • 默认值: false

二。 el-steps 事件详解

1. change:

   • 类型: Function
   • 用途: 当前步骤发生变化时触发的回调函数。
   • 参数: currentStep（当前步骤）

三。 el-step 属性详解

1. title:

   • 类型: String
   • 用途: 步骤标题。
   • 默认值: —

2. icon:

   • 类型: String
   • 用途: 步骤图标。
   • 默认值: —

3. description:

   • 类型: String
   • 用途: 步骤描述。
   • 默认值: —

4. status:

   • 类型: String
   • 用途: 步骤状态，可选值为 wait、process、finish、error、success。
   • 默认值: —

四。 el-step 插槽详解

1. title:

   • 插槽名称: title
   • 用途: 自定义步骤标题。

2. description:

   • 插槽名称: description
   • 用途: 自定义步骤描述。

五。实例

<template>
  <div>
    <h2>Steps 示例</h2>

    <!-- 基本用法 -->
    <el-steps :active="1" finish-status="success">
      <el-step title="步骤1" description="这是步骤1的描述信息"></el-step>
      <el-step title="步骤2" description="这是步骤2的描述信息"></el-step>
      <el-step title="步骤3" description="这是步骤3的描述信息"></el-step>
    </el-steps>

    <!-- 自定义步骤状态 -->
    <el-steps :active="2" finish-status="success">
      <el-step title="步骤1" icon="el-icon-edit"></el-step>
      <el-step title="步骤2" icon="el-icon-upload"></el-step>
      <el-step title="步骤3" icon="el-icon-picture"></el-step>
    </el-steps>

    <!-- 垂直方向 -->
    <el-steps direction="vertical" :active="1">
      <el-step title="步骤1" description="这是步骤1的描述信息"></el-step>
      <el-step title="步骤2" description="这是步骤2的描述信息"></el-step>
      <el-step title="步骤3" description="这是步骤3的描述信息"></el-step>
    </el-steps>

    <!-- 居中对齐 -->
    <el-steps :active="1" align-center>
      <el-step title="步骤1" description="这是步骤1的描述信息"></el-step>
      <el-step title="步骤2" description="这是步骤2的描述信息"></el-step>
      <el-step title="步骤3" description="这是步骤3的描述信息"></el-step>
    </el-steps>

    <!-- 简洁风格 -->
    <el-steps :active="1" simple>
      <el-step title="步骤1" icon="el-icon-edit"></el-step>
      <el-step title="步骤2" icon="el-icon-upload"></el-step>
      <el-step title="步骤3" icon="el-icon-picture"></el-step>
    </el-steps>

    <!-- 自定义步骤条的内容 -->
    <el-steps :active="1" finish-status="success">
      <el-step>
        <template #title>
          <span>步骤1</span>
        </template>
        <template #description>
          <span>这是步骤1的描述信息</span>
        </template>
      </el-step>
      <el-step>
        <template #title>
          <span>步骤2</span>
        </template>
        <template #description>
          <span>这是步骤2的描述信息</span>
        </template>
      </el-step>
      <el-step>
        <template #title>
          <span>步骤3</span>
        </template>
        <template #description>
          <span>这是步骤3的描述信息</span>
        </template>
      </el-step>
    </el-steps>

    <!-- 动态改变当前步骤 -->
    <el-button type="primary" @click="nextStep">下一步</el-button>
    <el-steps :active="activeStep" finish-status="success">
      <el-step title="步骤1" description="这是步骤1的描述信息"></el-step>
      <el-step title="步骤2" description="这是步骤2的描述信息"></el-step>
      <el-step title="步骤3" description="这是步骤3的描述信息"></el-step>
    </el-steps>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const activeStep = ref(1)

const nextStep = () => {
  if (activeStep.value < 3) {
    activeStep.value += 1
  }
}
</script>