Vue3实现获取验证码按钮倒计时效果
作者：永恒之月℡
这篇文章主要介绍了Vue3实现获取验证码按钮倒计时效果,用户点击获取验证码按钮,发送请求给后端,按钮失效,并且开始倒计时60秒；在此期间,用户无法再次点击按钮,即使用户刷新页面,倒计时依然存在,直到倒计时完毕,按钮恢复,感兴趣的小伙伴跟着小编一起来看看吧
Vue3实现获取验证码按钮倒计时效果
效果描述：用户点击获取验证码按钮，发送请求给后端，按钮失效，并且开始倒计时60秒；在此期间，用户无法再次点击按钮，即使用户刷新页面，倒计时依然存在，直到倒计时完毕，按钮恢复。效果图如下：
实现思路和具体实现
实现思路：
- 通过响应式变量来，设置倒计时默认数据（按钮名称，秒数，按钮状态）
- 倒计时函数，来改变响应式变量里的数据，使用周期函数（window.setInterval），来循环执行。
- 使用watch函数来监控响应式变量里的数据，是否改变，改变就将数据保存到LocalStorage中。
- 使用生命周期函数onMounted来获取LocalStorage里面的数据，防止用户刷新。
- 最后，将数据和函数，绑定到按钮上。
具体实现：
注意：为了简洁明了，代码里只有一个输入框、按钮和最重要的逻辑，没有样式。用了 element-plus框架，可自行修改。
<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>
到此这篇关于Vue3实现获取验证码按钮倒计时效果的文章就介绍到这了,更多相关Vue3验证码按钮倒计时内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！