vue 手机验证码倒计时

最新推荐文章于 2023-09-30 13:37:52 发布

原创最新推荐文章于 2023-09-30 13:37:52 发布 · 194 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript

Vue 专栏收录该内容

45 篇文章

订阅专栏

本文介绍如何使用Vue实现手机验证码的倒计时功能。通过在data中定义一个用于存放定时器的变量，并设置一个方法来控制倒计时的开始与结束，实现验证码请求后的60秒倒计时。

vue 手机验证码倒计时

data中定义一个类型null 用于存放定时器
比如 data (){ return { timer: null }}
接下来就是方法了

if (!this.timer) {
	let CountDown = 60; // 倒计时
	this.codeStatus = true; // 按钮禁用状态 ,自己定义下一
     this.codeTimeout = CountDown; 
     this.timer = setInterval(() => {
         if (this.codeTimeout > 0 && this.codeTimeout <= CountDown) {
             this.codeTimeout--;
         }else{
             this.codeStatus = false;
             clearInterval(this.timer);
             this.timer = null;
         }
     }, 1000);
}