目錄
一.基本使用
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 = "";
}
3.展示效果
結語
以上就是element-plus中，Step步驟條組件的基本使用。
我們使用該組件完成了修改用戶密碼的功能。
喜歡本篇文章的話，可以留個免費的關注~
)
