当前位置：首页 > ds >正文

element-plus中，Steps 步骤条组件的使用

ds 2025/7/16 6:39:27

一.基本使用

1.代码

2.效果展示

3.代码解读

二.案例：修改用户的密码

1.期望效果

2.代码

3.展示效果

结语

一.基本使用

1.代码

从官网复制如下代码：

<template><div><el-stepsstyle="max-width: 600px":space="200":active="activeStep"finish-status="success"><el-step title="第一步" /><el-step title="第二步" /><el-step title="第三步" /></el-steps></div>
</template><script setup>
import {ref} from 'vue';
//控制步骤条的高亮显示
const activeStep = ref(0); </script><style scoped>
</style>

2.效果展示

3.代码解读

①:space代表每一个步骤之间的距离。

②:active表示令哪个步骤高亮显示。

举例：当activeStep 为0时，代表我们要完成第一步；当activeStep 为1时，代表我们第一步已经完成，当前要完成第二步；当activeStep 为2时，代表我们第二步已经完成，当前要完成第三步；当activeStep 为3时，代表我们第三步已经完成（当前要完成第四步，但没有第四步了）。

③finish-status="success"代表被完成的步骤，显示对钩图标。我们可以自行查询element-plus官网，还有其他的样式。

二.案例：修改用户的密码

1.期望效果

第一步：点击【修改密码】按钮

第二步：弹出【修改用户密码】对话框

第三步：完成修改用户密码的三步操作（输入旧密码、设置新密码、修改成功后跳转到登录页）。

2.代码

①定义一个变量，控制哪个步骤高亮显示：

//控制修改密码步骤条的激活步骤
const activeStep = ref(0);//一开始要完成第一步

②编写【修改用户密码】对话框，在对话框中，使用Step步骤条组件：

其中变量activeStep 控制哪个步骤高亮显示，并决定渲染哪些元素（旧密码输入框 / 新密码输入框 / 修改密码成功提示）。

<!-- 修改用户密码的对话框 -->
<el-dialogv-model="updatePasswordDialog"width="500"style="height: auto;"draggable@closed="closedUpdatePasswordDialog"
><!-- 对话框标题插槽 --><template #header><!-- <el-icon><Setting /></el-icon><span style="margin-left: 5px;">修改密码</span> --><!-- 步骤条 --><el-stepsstyle="width: 800px":space="200":active="activeStep"finish-status="success"><el-step title="输入旧密码" /><el-step title="设置新密码" /><el-step title="修改成功" /></el-steps></template><!-- 步骤一的输入框 --><div v-if="activeStep == 0"><el-input v-model="userOldPwd" type="password" show-password  style="width: 240px" placeholder="请输入用户的旧密码"></el-input><el-button type="primary" style="margin-left: 5px;" @click="confirmOldPwd">确定</el-button></div><!-- 步骤二的输入框 --><div v-if="activeStep == 1"><el-input v-model="userNewPwd" type="password" show-password  style="width: 240px" placeholder="请设置用户的新密码"></el-input><el-button type="primary" style="margin-left: 5px;" @click="setNewPwd">设置</el-button></div><!-- 完成步骤三的提示 --><div v-if="activeStep == 3"><span>修改密码成功！将在 3 秒后返回登录页面...</span></div> 
</el-dialog>

③输入旧密码，点击【确认】按钮触发的事件

//点击【输入旧密码】的确认按钮
const confirmOldPwd = () => {//如果旧密码 = pinia中的用户密码，则完成本步骤if(userOldPwd.value == user.password){//提示验证成功ElMessage.success("验证成功");//完成本步骤activeStep.value = 1;}else{ElMessage.error("验证错误，请重新输入");}
}

④输入新密码后，点击【设置】按钮触发的事件

//点击【设置新密码】的设置按钮
const setNewPwd = async () => {//完成本步骤2activeStep.value = 2;//给后端发送修改密码的请求const data = {password: userNewPwd.value}const res1 = await updateUserPwdById(user.id, data);//倒计时1秒后，提示设置密码成功，并完成步骤3setTimeout(() => {if(res1.code == 200){//提示成功信息ElMessage.success("设置成功，将在3秒后返回登录页面~")//完成步骤3activeStep.value = 3;//倒计时3秒后，退出系统（跳转到登录页面）setTimeout(() => {//跳转到登录页面router.push("/login")//清空pinia中的用户信息、tabs标签信息tagStoreInfo.removeAllTagButHome();},3000)}else{//提示失败信息ElMessage.error("设置失败~")//返回步骤2activeStep.value = 1;}     }, 1000);
}

⑤关闭【修改用户密码】对话框后，触发事件

//关闭修改密码对话框后，触发的事件
const closedUpdatePasswordDialog = () => {//令步骤条的激活步骤为0activeStep.value = 0;//清空输入框的值userOldPwd.value = "";userNewPwd.value = "";
}