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

🌈 Java毕业设计开发手记：从困惑到成长的编程之旅 🚀

各位CSDN的技术小伙伴们~✨

作为一名正在Java毕业设计海洋中奋力前行的准毕业生🎓，我怀着既紧张又兴奋的心情在这里种下这棵"技术分享树"🌳。这个空间将记录我从零搭建完整Java项目的奇妙旅程🎢，包括技术选型的纠结🤔、功能实现的喜悦🎉、踩坑的酸爽😅以及破局的顿悟💡！

🎨 为什么选择分享这段旅程？

在代码世界漫游的日子里，我发现：

✨ 纸上得来终觉浅 - 课堂Java知识如何在真实项目中跳舞？ ✨ 选择困难症发作 - Spring Boot还是SSM？MyBatis还是JPA？ ✨ 深夜debug的孤独 - 那些让咖啡都失效的bug该向谁倾诉？

正是这些酸甜苦辣🍋，让我决定打开这个"技术日记本"📖。期待能得到各位大佬的指点👨🏫，也为学弟学妹们点亮一盏小夜灯💡~

🌟 期待与您碰撞的火花

在这里我们会遇见：

🍄 技术选择的内心戏 - 为什么最终拜倒在MyBatis-Plus的石榴裙下？ 🐞 bug捕捉日记 - 比如上周那个让我头发掉一地的Spring事务问题 🎁 最佳实践礼包 - 从项目结构到代码规范的升级打怪之路 📚 宝藏资源分享 - 那些救我于水火的神仙教程和工具 💫 程序员成长物语 - 从战战兢兢到自信爆棚的心路历程

🎊 最后的彩蛋

编程从来不是单机游戏🎮，正是开源分享让技术世界如此绚烂🎆。虽然我现在只是技术森林里的一棵小树苗🌱，但也想为生态贡献一片绿叶🍃。

接下来会保持每周2-3篇的更新节奏⏰，像连载小说一样记录这个项目的成长📈。您的每个点赞👍、收藏⭐、评论💬，都是浇灌我继续生长的阳光雨露☀️🌧️。

让我们开始这段充满惊喜的奇幻之旅吧！如果对我的项目有任何奇思妙想，欢迎随时来聊天室坐坐☕~

🎈Happy Coding！🎈

PS：为保护学术小花朵🌸，核心业务代码不能show，但技术细节会像拆盲盒一样分享哦！

目录

一.基本使用

1.代码

2.效果展示

3.代码解读

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

1.期望效果

2.代码

3.展示效果

结语

一.基本使用

1.代码

从官网复制如下代码：

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 控制哪个步骤高亮显示，并决定渲染哪些元素（旧密码输入框 / 新密码输入框 / 修改密码成功提示）。

v-model="updatePasswordDialog"

width="500"

style="height: auto;"

draggable

@closed="closedUpdatePasswordDialog"

>

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

//点击【输入旧密码】的确认按钮

const confirmOldPwd = () => {

//如果旧密码 = pinia中的用户密码，则完成本步骤

if(userOldPwd.value == user.password){

//提示验证成功

ElMessage.success("验证成功");

//完成本步骤

activeStep.value = 1;

}else{

ElMessage.error("验证错误，请重新输入");

}

}

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

//点击【设置新密码】的设置按钮

const setNewPwd = async () => {

//完成本步骤2

activeStep.value = 2;

//给后端发送修改密码的请求

const data = {

password: userNewPwd.value

}

const res1 = await updateUserPwdById(user.id, data);

//倒计时1秒后，提示设置密码成功，并完成步骤3

setTimeout(() => {

if(res1.code == 200){

//提示成功信息

ElMessage.success("设置成功，将在3秒后返回登录页面~")

//完成步骤3

activeStep.value = 3;

//倒计时3秒后，退出系统（跳转到登录页面）

setTimeout(() => {

//跳转到登录页面

router.push("/login")

//清空pinia中的用户信息、tabs标签信息

tagStoreInfo.removeAllTagButHome();

},3000)

}else{

//提示失败信息

ElMessage.error("设置失败~")

//返回步骤2

activeStep.value = 1;

}

}, 1000);

}

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

//关闭修改密码对话框后，触发的事件

const closedUpdatePasswordDialog = () => {

//令步骤条的激活步骤为0

activeStep.value = 0;

//清空输入框的值

userOldPwd.value = "";

userNewPwd.value = "";

}

3.展示效果

结语

以上就是element-plus中，Step步骤条组件的基本使用。

我们使用该组件完成了修改用户密码的功能。

喜欢本篇文章的话，可以留个免费的关注~