Element-Plus 步骤条使用

理论：

el-steps 是 Element UI 库中的一个组件，用于显示流程步骤，常用于引导用户完成一系列操作。Element UI 是一个基于 Vue 2 的桌面端组件库，但在 Vue 3 中也有对应的版本（如 Element Plus）。

安装 Element Plus

首先，确保你已经安装了 Element Plus。如果你还没有安装，可以使用 npm 或 yarn 来安装：

npm install element-plus

或者

yarn add element-plus

引入 Element Plus

在你的项目中引入 Element Plus。你可以全局引入，也可以按需引入。

全局引入

在 main.js 中全局引入 Element Plus：

import { createApp } from 'vue';
import App from './App.vue';
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';

const app = createApp(App);
app.use(ElementPlus);
app.mount('#app');

按需引入

如果你只想按需引入 el-steps，可以使用 babel-plugin-component 插件来实现。首先安装插件：

npm install babel-plugin-component

然后在 .babelrc 或 babel.config.js 中配置插件：

{
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-plus",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

在组件中按需引入 el-steps：

import { ElSteps, ElStep } from 'element-plus';
import 'element-plus/lib/theme-chalk/el-steps.css';
import 'element-plus/lib/theme-chalk/el-step.css';

export default {
  components: {
    ElSteps,
    ElStep
  }
};

使用 el-steps 组件

下面是一个简单的示例，展示如何在 Vue 3 中使用 el-steps 组件。

示例组件 (StepsExample.vue)

<template>
  <div>
    <el-steps :active="active" finish-status="success" simple style="margin-top: 20px">
      <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>
    <div style="margin-top: 20px">
      <el-button style="margin-top: 12px;" @click="prev">上一步</el-button>
      <el-button style="margin-top: 12px;" @click="next">下一步</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0
    };
  },
  methods: {
    next() {
      if (this.active++ > 2) this.active = 0;
    },
    prev() {
      if (this.active-- < 0) this.active = 2;
    }
  }
};
</script>

<style>
/* 你可以在这里添加一些自定义样式 */
</style>

解释

1. 模板 (Template)：

   • <el-steps> 标签定义了步骤条，:active 绑定当前激活的步骤索引，finish-status 设置已完成步骤的状态，simple 使步骤条显示为简洁模式。
   • <el-step> 标签定义每个步骤，title 属性设置步骤的标题，icon 属性设置步骤的图标。
   • <el-button> 标签定义了上一步和下一步的按钮，分别绑定 prev 和 next 方法。

2. 脚本 (Script)：

   • data 函数返回一个对象，定义了 active 数据属性，表示当前激活的步骤索引。
   • methods 对象定义了 next 和 prev 方法，分别用于切换到下一个步骤和上一个步骤。

3. 样式 (Style)：

   • 你可以在这里添加一些自定义样式，使组件看起来更符合你的需求。

运行示例

确保你的项目结构如下：

src/
├── components/
│   └── StepsExample.vue
├── App.vue
└── main.js

在 App.vue 中引入并使用 StepsExample 组件：

<template>
  <div id="app">
    <steps-example></steps-example>
  </div>
</template>

<script>
import StepsExample from './components/StepsExample.vue';

export default {
  components: {
    StepsExample
  }
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

运行项目：

npm run serve

你应该能看到一个带有三个步骤的步骤条，并且可以通过按钮切换步骤。

拓展应用

将 el-step 与不同的组件联动可以实现内容切换显示：

这个示例展现的是一个组件 StepsExample.vue，其中包含三个步骤，每个步骤显示不同的信息。用户可以通过点击“上一步”和“下一步”按钮来切换步骤。

<template>
  <div>
    <el-steps :active="active" finish-status="success" simple style="margin-top: 20px">
      <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>
    
    <div v-if="active === 0" class="step-content">
      <h2>步骤1</h2>
      <p>这是步骤1的信息。</p>
    </div>
    
    <div v-if="active === 1" class="step-content">
      <h2>步骤2</h2>
      <p>这是步骤2的信息。</p>
    </div>
    
    <div v-if="active === 2" class="step-content">
      <h2>步骤3</h2>
      <p>这是步骤3的信息。</p>
    </div>
    
    <div style="margin-top: 20px">
      <el-button style="margin-top: 12px;" @click="prev">上一步</el-button>
      <el-button style="margin-top: 12px;" @click="next">下一步</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0
    };
  },
  methods: {
    next() {
      if (this.active < 2) {
        this.active++;
      }
    },
    prev() {
      if (this.active > 0) {
        this.active--;
      }
    }
  }
};
</script>

<style scoped>
.step-content {
  margin-top: 20px;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
}
</style>

也可以通过直接点击步骤条进行修改：
利用@Click方法

<template>
  <div>
    <el-steps :active="active" finish-status="success" simple style="margin-top: 20px">
      <el-step title="步骤1" icon="el-icon-edit" @click="setActive(0)"></el-step>
      <el-step title="步骤2" icon="el-icon-upload" @click="setActive(1)"></el-step>
      <el-step title="步骤3" icon="el-icon-picture" @click="setActive(2)"></el-step>
    </el-steps>
    
    <div v-if="active === 0" class="step-content">
      <h2>步骤1</h2>
      <p>这是步骤1的信息。</p>
    </div>
    
    <div v-if="active === 1" class="step-content">
      <h2>步骤2</h2>
      <p>这是步骤2的信息。</p>
    </div>
    
    <div v-if="active === 2" class="step-content">
      <h2>步骤3</h2>
      <p>这是步骤3的信息。</p>
    </div>
    
    <div style="margin-top: 20px">
      <el-button style="margin-top: 12px;" @click="prev">上一步</el-button>
      <el-button style="margin-top: 12px;" @click="next">下一步</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0
    };
  },
  methods: {
    setActive(index) {
      this.active = index;
    },
    next() {
      if (this.active < 2) {
        this.active++;
      }
    },
    prev() {
      if (this.active > 0) {
        this.active--;
      }
    }
  }
};
</script>

<style scoped>
.step-content {
  margin-top: 20px;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
}
</style>