1. 安装 Element Plus：
如果你还没有安装 Element Plus，请参考前面的步骤进行安装。
2. 导入和使用 Steps：
在你的 Vue 组件中导入 Steps，并在模板中使用它。以下是一个简单的示例：
<template>
<div>
<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>
<el-button @click="nextStep">下一步</el-button>
</div>
</template>
<script>
import { ElSteps, ElStep, ElButton } from 'element-plus';
export default {
components: {
ElSteps,
ElStep,
ElButton,
},
data() {
return {
activeStep: 0,
};
},
methods: {
nextStep() {
this.activeStep++;
},
},
};
</script>
在上述代码中，我们导入了 ElSteps、ElStep 和 ElButton 组件，并在模板中使用它们来创建一个简单的步骤条。通过点击按钮，可以切换到下一个步骤。
3. 自定义 Steps：
你可以根据需要自定义 Steps，例如，添加图标、修改状态等：
<template>
<div>
<el-steps :active="activeStep" finish-status="success">
<el-step title="步骤 1" icon="el-icon-user"></el-step>
<el-step title="步骤 2" icon="el-icon-goods"></el-step>
<el-step title="步骤 3" icon="el-icon-location"></el-step>
</el-steps>
<el-button @click="nextStep">下一步</el-button>
</div>
</template>
<script>
import { ElSteps, ElStep, ElButton } from 'element-plus';
export default {
components: {
ElSteps,
ElStep,
ElButton,
},
data() {
return {
activeStep: 0,
};
},
methods: {
nextStep() {
this.activeStep++;
},
},
};
</script>
在这个例子中，我们通过在 el-step 中使用 icon 属性添加了步骤的图标。你还可以根据需要调整步骤的状态，比如使用 status 属性来设置步骤的状态。
转载请注明出处：http://www.zyzy.cn/article/detail/5573/ElementPlus