首先，确保你已经引入了 Element-React 的样式和脚本。可以通过以下方式之一来引入：
1. 使用 CDN：
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入脚本 -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
2. 使用 npm 安装：
npm install element-ui
然后在你的 Vue 项目中引入并使用 Steps 组件：
<template>
<div>
<el-steps :active="activeStep" finish-status="success">
<el-step title="步骤一"></el-step>
<el-step title="步骤二"></el-step>
<el-step title="步骤三"></el-step>
</el-steps>
<div class="steps-content">
步骤 {{ activeStep + 1 }} 内容
</div>
<div class="steps-action">
<el-button :disabled="activeStep === 0" @click="prevStep">上一步</el-button>
<el-button type="primary" @click="nextStep">下一步</el-button>
</div>
</div>
</template>
<script>
import { ElSteps, ElStep, ElButton } from 'element-ui';
export default {
data() {
return {
activeStep: 0,
};
},
methods: {
nextStep() {
if (this.activeStep < 2) {
this.activeStep++;
}
},
prevStep() {
if (this.activeStep > 0) {
this.activeStep--;
}
},
},
components: {
ElSteps,
ElStep,
ElButton,
},
};
</script>
在上面的例子中，我们通过<el-steps>和<el-step>来创建步骤条。<el-steps>的 :active 属性表示当前激活的步骤，finish-status 属性表示已完成步骤的状态（在这里是 success）。
下面的部分展示了步骤对应的内容，通过 activeStep 控制显示哪个步骤的内容。按钮区域则提供了上一步和下一步的操作，通过点击按钮来改变 activeStep。
你可以根据实际需求来设置步骤的数量、步骤标题、以及相应的处理逻辑。
转载请注明出处：http://www.zyzy.cn/article/detail/5631/Element-React