我用的vue3,element-plus,但是vue2应该也一样。我要实现的功能是密码重置后,弹出5s后自动关闭弹窗以及5s内用户点击确定就退出登录。
javascript
// 在vue组件的data里
data() {
return {
_logoutTimer: null // 定时器
}
}
javascript
// 在vue的methods里
saveResetPwd() {
// 重置成功后弹出 5 秒倒计时确认框:可点击"确定"立即退出或倒计时结束自动退出
this.$refs.resetPwdForm.validate(valid => {
if (!valid) return;
this.resetPwd.username = this.userInfo.username;
const { confirmPassword, ...requestParams } = this.resetPwd; // 去掉 confirmPassword
this.$store.dispatch('ResetPassword', { requestParams, id: this.userInfo.id })
.then(() => {
this.showUserInfo = false;
let seconds = 5;
// 清理旧倒计时防止重复
if (this._logoutTimer) {
clearInterval(this._logoutTimer);
this._logoutTimer = null;
}
const doLogout = () => {
this.$store.dispatch('LogOut').then(() => {
this.$router.push({ path: '/login' });
});
};
const confirmPromise = this.$confirm(
`密码修改成功,系统将在${seconds}s后自动退出,请您重新登录!`,
'提示',
{
type: 'warning',
showCancelButton: false,
showClose: false,
closeOnClickModal: false,
closeOnPressEscape: false,
confirmButtonText: `确定(${seconds}s)`
}
);
// 用户点击"确定"提前退出
confirmPromise.then(() => {
if (this._logoutTimer) {
clearInterval(this._logoutTimer);
this._logoutTimer = null;
}
doLogout();
}).catch(() => {
// 异常关闭兜底退出
if (this._logoutTimer) {
clearInterval(this._logoutTimer);
this._logoutTimer = null;
}
doLogout();
});
// 倒计时:更新按钮文字与提示文本;结束时自动关闭弹窗并退出
this._logoutTimer = setInterval(() => {
seconds--;
if (seconds <= 0) {
clearInterval(this._logoutTimer);
this._logoutTimer = null;
try { ElMessageBox.close(); } catch (e) {}
doLogout();
} else {
const btn = document.querySelector('.el-message-box__btns .el-button--primary');
if (btn) btn.textContent = `确定(${seconds}s)`;
const msgP = document.querySelector('.el-message-box__message p');
if (msgP) msgP.textContent = `密码修改成功,系统将在${seconds}s后自动退出,请您重新登录!`;
}
}, 1000);
});
});
}
有人可能疑问为什么confirm的弹窗,为什么要ElMessageBox.close();去关闭,因为this.confirm只要不点击按钮它就只返回一个promise对象,根本拿不到实例的,this.confirm不能直接控制关闭,而且this.confirm源码里面调用的就是MessageBox(如下图)
