当前位置: 首页 > news >正文

vue3 confirm倒计时

我用的vue3,element-plus,但是vue2应该也一样。我要实现的功能是密码重置后,弹出5s后自动关闭弹窗以及5s内用户点击确定就退出登录。

// 在vue组件的data里
data() {return {_logoutTimer: null // 定时器}
}
// 在vue的methods里
saveResetPwd() {// 重置成功后弹出 5 秒倒计时确认框:可点击“确定”立即退出或倒计时结束自动退出this.$refs.resetPwdForm.validate(valid => {if (!valid) return;this.resetPwd.username = this.userInfo.username;const { confirmPassword, ...requestParams } = this.resetPwd; // 去掉 confirmPasswordthis.$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(如下图)

http://www.dtcms.com/a/525097.html

相关文章:

  • 定制网站与模板建站维护二级网站建设基本情况
  • 流行网站开发工具wordpress主题屋
  • ManiSkill2学习笔记
  • LeetCode:200. 岛屿数量
  • 【C】函数指针
  • 响应式网站是什么意思上海公布最新情况
  • 七牛云建网站暴雪退款申请快速入口
  • 桂林手机网站制作最新人才招聘网
  • AI驱动的客户管理:悟空AI CRM的核心功能与优势
  • 零基础网站建设教学公司wordpress 点击文章图片路径
  • [cpprestsdk] 异步编程模型 | `pplx::task<T>`| `.get()``.then()`
  • 简单而管用的清理gpu显存的方法及分析
  • 哪个网站做化妆品效果好用ps做美食网站
  • 第7章 muduo编程示例(4)
  • 网站备案是不是就是空间备案西安搬家公司收费情况一览表
  • 网站开发项目详细计划天津住房与城乡建设厅网站
  • ROS2(3)入门篇 - 使用客户端库
  • 佛山新网站制作特色php门户网站源码
  • 前端如何调试?从浏览器到真机的完整调试实践指南
  • 登陆国外网站速度慢企业网站制作
  • 网站制作top北京网站推广营销策划
  • 深入理解AtomicBoolean的使用与底层原理
  • 教育类手机网站模板下载wordpress 导出用户
  • 电商履约大促峰值应对:核心业务数据预热方案详解
  • 南京城乡建设网站网站建设中山优化
  • Antares SQL,一款跨平台开源 SQL 客户端
  • hot 100(5) —— 盛最多水的容器(双指针)
  • 手机端网站seo国内专门做酒的网站
  • 平面ui设计网站代理网址网站
  • 2025年10月24日 今日AI大事件