Vue3实现获取验证码按钮倒计时效果

Vue3实现获取验证码按钮倒计时效果

效果描述:用户点击获取验证码按钮,发送请求给后端,按钮失效,并且开始倒计时60秒;在此期间,用户无法再次点击按钮,即使用户刷新页面,倒计时依然存在,直到倒计时完毕,按钮恢复。效果图如下:

1、 实现思路和具体实现

实现思路:

  1. 通过响应式变量来,设置倒计时默认数据(按钮名称,秒数,按钮状态)
  2. 倒计时函数,来改变响应式变量里的数据,使用周期函数(window.setInterval),来循环执行。
  3. 使用watch函数来监控响应式变量里的数据,是否改变,改变就将数据保存到LocalStorage中。
  4. 使用生命周期函数onMounted来获取LocalStorage里面的数据,防止用户刷新。
  5. 最后,将数据和函数,绑定到按钮上。

具体实现:

注意:为了简洁明了,代码里只有一个输入框、按钮和最重要的逻辑,没有样式。用了 element-plus框架,可自行修改。

html 复制代码
<template>
	<div>
  <el-input v-model="input" style="width: 125px;margin-right: 10px;" placeholder="请输入验证码" />
   <el-button type="primary" :disabled="countdownInfo.isDisabled" @click="countdown() " style="width:105px;">{{ countdownInfo.buttonName }}</el-button>
	</div>
</template>


<script setup>
    import { ElMessage } from 'element-plus';
	import { ref,watch,onMounted } from 'vue';

      //倒计时信息
    const countdownInfo = ref({
    second: 60,    //倒计时秒
    buttonName: "获取验证码", //按钮名称
    isDisabled: false        //按钮是否有效,默认有效
   })  
    
    //生命周期函数
    onMounted(() => {
     //获取localStorage里保存的,倒计时字符串信息,并解析为JSON对象
    var localCountdownInfo = JSON.parse(localStorage.getItem("countdownInfo"));
    //判断获取的信息是否为空,为空,说明里面没有保存数据,就不赋值到countdownInfo中
    if (localCountdownInfo) {
        countdownInfo.value =localCountdownInfo;
        //不为空时,判断倒计时秒数,是否为60,不是就直接调用倒计时函数(说明没有倒计时完),执行倒计时。
        if (countdownInfo.value.second !== 60) {
            countdown()  //调用倒计时函数
        }
    }
})


// 定义倒计时函数
const countdown=()=> {
    countdownInfo.value.isDisabled = true;   //按钮无效
            //开始倒计时
            let interval = window.setInterval(function () {
                countdownInfo.value.buttonName =  countdownInfo.value.second + "秒后重新获取"; //重新设置按钮名称
                countdownInfo.value.second = countdownInfo.value.second - 1;   //倒计时减
                //判断是否减到了0,为0就恢复默认信息,并停止倒计时
                if (countdownInfo.value.second <=0) {
                    countdownInfo.value.buttonName = "获取验证码";
                    countdownInfo.value.second = 60;
                    countdownInfo.value.isDisabled = false;
                    window.clearInterval(interval);
                }
            }, 1000);  //一秒执行一次

}

//监听对象,数据是否发生改变,改变就进行重新保存
watch(countdownInfo, (newValue) => {
    var JSONSTR = JSON.stringify(newValue);  //将JSON转为字符串
    localStorage.setItem("countdownInfo", JSONSTR)  //将其保存到localStorage中
}, {
    deep: true   //深度监听
})
</script>
相关推荐
Slaughter信仰4 分钟前
深入理解Java虚拟机:JVM高级特性与最佳实践(第3版)第四章知识点问答补充及重新排版
java·开发语言·jvm
心灵宝贝7 分钟前
Mac用户安装JDK 22完整流程(Intel版dmg文件安装指南附安装包下载)
java·开发语言·macos
wayhome在哪17 分钟前
30KB 轻量王者!SortableJS 轻松搞定拖拽需求
javascript·设计·dom
secondyoung22 分钟前
一文丝滑使用Markdown:从写作、绘图到转换为Word与PPT
开发语言·vscode·编辑器·powerpoint·markdown·visual studio·mermaid
骑驴看星星a24 分钟前
Vue中的scoped属性
前端·javascript·vue.js
四月_h31 分钟前
在 Vue 3 + TypeScript 项目中实现主题切换功能
前端·vue.js·typescript
qq_4275060836 分钟前
vue3写一个简单的时间轴组件
前端·javascript·vue.js
雨枪幻。2 小时前
spring boot开发:一些基础知识
开发语言·前端·javascript
爱炸薯条的小朋友2 小时前
C#由Dictionary不正确释放造成的内存泄漏问题与GC代系
开发语言·opencv·c#
lecepin2 小时前
AI Coding 资讯 2025.8.27
前端·ai编程