vue里定时器setInterval的使用,短信验证码的demo,倒计时的使用






使用elementui制作的登录框card,定义一个随机六位数数字验证码
通过短信api给输入的手机号,发送随机验证码,保存这个随机数
验证码输入后,输入框的值和保存的随机数做比较,相等即表示验证码正确

由于vue是单页面应用,
某个页面内使用定时器时,需要把定时器定义在data全局,timer:null
当需要使用时给this.timer赋值
另外,在页面组件生命周期里,需要离开页面时把定时器清理掉
regetverifyCode() {
        if(this.timer){
            clearInterval(this.timer);
            this.verifyCodeText = "获取验证码";
        }
        let time = 59;
        this.timer = setInterval(() => {
        this.verifyCodeText = `获取验证码(${time}s)`;
        this.isCanRegetverifyCodeFlag = true;
        time--;
        if (time == 0) {
        clearInterval(this.timer);
        this.verifyCodeText = "获取验证码";
        this.isCanRegetverifyCodeFlag = false;
        }
    }, 1000);
},

//另外,在页面组件生命周期里,需要离开页面时把定时器清理掉
beforeDestroy() {
    if(this.timer) {
        clearInterval(this.timer);
    }
}

你可能感兴趣的:(vue里定时器setInterval的使用,短信验证码的demo,倒计时的使用)