【区分vue2和vue3下的element UI Steps 步骤条组件，分别详细介绍属性，事件，方法如何使用，并举例】

在 Vue 2 和 Vue 3 中，Element UI（针对 Vue 2）和 Element Plus（针对 Vue 3）提供了 Steps 步骤条组件，用于展示当前操作的进度步骤。虽然这两个库都提供了步骤条组件，但它们在属性、事件和方法的实现上可能会有所不同。下面我将分别介绍 Vue 2 下的 Element UI Steps 组件和 Vue 3 下的 Element Plus Steps 组件的使用方式。

Vue 2 + Element UI Steps 组件

属性（Props）

• space：步骤之间的间距。
• direction：步骤条的方向，可选值为 horizontal 或 vertical。
• active：当前激活的步骤，可以使用 v-model 双向绑定。
• finish-status：已完成步骤的状态，默认值为 success。
• process-status：当前步骤的状态，默认值为 process。
• simple：是否使用简洁风格。

事件（Events）

• change：当活跃步骤改变时触发，返回改变后的步骤的索引，从 0 开始。

方法（Methods）

Element UI 的 Steps 组件在 Vue 2 中通常不直接暴露方法供外部调用。你主要通过修改绑定的 active 属性来控制步骤条的状态。

示例

<template>
  <el-steps :active="active" finish-status="success" process-status="process" @change="handleChange">
    <el-step title="步骤 1"></el-step>
    <el-step title="步骤 2"></el-step>
    <el-step title="步骤 3"></el-step>
  </el-steps>
</template>

<script>
export default {
  data() {
    return {
      active: 0,
    };
  },
  methods: {
    handleChange(newActive) {
      console.log(`当前活跃步骤：${newActive}`);
      // 你可以在这里根据新的活跃步骤进行逻辑处理
    },
  },
};
</script>

Vue 3 + Element Plus Steps 组件

在 Vue 3 中，Element Plus 的 Steps 组件提供了类似的属性和事件，但可能会有一些细微的差别或新增的属性。

属性（Props）

• active：当前激活步骤的索引，从 0 开始。
• direction：步骤条的方向，可选值为 horizontal 或 vertical。
• align-center：步骤项是否居中对齐。
• simple：是否使用简洁风格。
• finish-icon：已完成步骤的图标。
• active-icon：当前步骤的图标。
• process-icon：步骤进行中的图标。

事件（Events）

• update:active：当活跃步骤改变时触发，使用 .sync 修饰符或 v-model 时自动处理。
• change：在 Element Plus 中可能不再直接提供 change 事件，而是使用 update:active。

方法（Methods）

Element Plus 的 Steps 组件同样不直接暴露方法供外部调用。你主要通过修改绑定的 active 属性或监听 update:active 事件来控制步骤条的状态。

示例

<template>
  <el-steps v-model:active="active" direction="horizontal" align-center>
    <el-step title="步骤 1"></el-step>
    <el-step title="步骤 2"></el-step>
    <el-step title="步骤 3"></el-step>
  </el-steps>
</template>

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

const active = ref(0);

// 注意：在 Element Plus 中，你可能不需要显式地处理 change 事件，
// 因为 v-model:active 已经帮你处理了活跃步骤的更新。
// 如果你需要监听活跃步骤的变化，可以使用 watch 来观察 active 的变化。
</script>

请注意，上述示例和属性列表是基于 Element Plus 的一般用法和文档编写的，具体实现可能会根据 Element Plus 的版本和更新而有所不同。因此，建议查阅最新的 Element Plus 官方文档以获取最准确的信息。