vue3 confirm倒计时

我用的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(如下图)

相关推荐
子兮曰3 天前
jev-ultrafast 深度解析:7 秒订机票的浏览器 Agent 是如何炼成的
前端·后端·agent
子兮曰3 天前
Jev 爆发一周:7 秒 Agent 背后的 System One 生态与三场争议
前端·后端·ai编程
前端小万3 天前
写公众号赚了 3000 块后,我做了一款叫 "一键成稿" 的软件
前端·微信小程序
爱勇宝3 天前
ZCode 开源 24 小时:一份没有历史的账本,回答不了"有没有偷代码"
前端·后端·chatglm (智谱)
三十而立洋3 天前
Cookie 详解:从产生到安全,一次讲透
前端·javascript
卡布鲁3 天前
把一个 Vite + Vue3 应用塞进 qiankun (React + Umi3) 主站:十个坑的复盘
前端·javascript·react.js
汉堡大王95273 天前
Jev:不是聊天机器人, 而是一个智能 if 语句
前端·人工智能·后端
梦想很大很大3 天前
从运行事实到回归证据:Workrun 的 Telemetry 与 Evaluation 实践
前端·人工智能·后端
计算机魔术师3 天前
Meta Muse agent 接入 Shopify 的 Shop Pay 实现代理式购物
前端
沙蒿同学3 天前
我用 Go 搭了一条 AI Agent 流水线:从 1 张商品图到一整套淘宝详情页
前端·javascript·后端