elementui elstep

关于 ElementUI 的 el-step 组件

ElementUI 是一个基于 Vue.js 的组件库，el-step 是其提供的步骤条组件，用于展示任务的进度或步骤流程。以下是关于 el-step 的主要使用方法和特性。

基本用法

el-step 需要包裹在 el-steps 容器中使用，通过 active 属性控制当前激活的步骤。每个步骤通过 el-step 组件定义，title 属性设置步骤标题。

<el-steps :active="active">
  <el-step title="步骤1"></el-step>
  <el-step title="步骤2"></el-step>
  <el-step title="步骤3"></el-step>
</el-steps>

属性配置

el-steps 支持以下常用属性：

• active：当前激活的步骤索引（从 0 开始）。
• space：步骤条的宽度，支持百分比或固定值。
• direction：步骤条方向，可选 horizontal（水平）或 vertical（垂直）。
• process-status：当前步骤的状态，如 wait、process、finish、error。

el-step 支持以下属性：

• title：步骤标题。
• description：步骤描述。
• icon：自定义图标类名。
• status：单独设置步骤状态。

示例代码

以下是一个完整的示例，展示如何结合数据动态渲染步骤条：

<template>
  <div>
    <el-steps :active="currentStep" finish-status="success">
      <el-step v-for="(step, index) in steps" :key="index" :title="step.title"></el-step>
    </el-steps>
    <el-button @click="nextStep">下一步</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentStep: 0,
      steps: [
        { title: '步骤1' },
        { title: '步骤2' },
        { title: '步骤3' }
      ]
    };
  },
  methods: {
    nextStep() {
      if (this.currentStep < this.steps.length) {
        this.currentStep++;
      }
    }
  }
};
</script>

自定义样式

可以通过覆盖 ElementUI 的 CSS 变量或直接修改样式来自定义步骤条外观。例如：

.el-step__title {
  font-size: 14px;
  color: #606266;
}
.el-step__head.is-process {
  color: #409EFF;
  border-color: #409EFF;
}

注意事项

• 确保 active 的值不超过步骤总数减一。
• 动态修改步骤数据时，需要更新 active 的值以匹配新的步骤索引。
• 垂直方向步骤条需要为父容器设置足够的高度。