vue-cli脚手架之短信验证码倒计时60s

最新推荐文章于 2020-12-12 03:44:03 发布

自在飞花轻似梦paofu

最新推荐文章于 2020-12-12 03:44:03 发布

阅读量405

点赞数

分类专栏：前端框架之VUE

原创珍贵，转载请声明出处。

本文链接：https://blog.csdn.net/weixin_42277214/article/details/95164707

版权

前端框架之VUE 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1.引入计时器和清除定时器的函数

import { setInterval, clearInterval } from 'timers';

2.定义一个为null的变量interval，和一个负责循环的变量i

var interval=null
var i=60

3.在methods对象中定义点击获取验证码的方法。必须判断interval是否为null，否则循环不会停止。当发送验证码的时候，不允许点击获取验证码的按钮（button的属性diabled）。

sendMsg(){
	  if(interval!=null){
                    clearInterval(interval)
                }else{
                interval=setInterval(()=>{
            
                if(i>0 && i<=5){
                 
                    i--
                    this.count=i+"秒"		//秒数
                    this.msgcodeinfo='重新发送'	//按钮上展示的信息
                    this.disabled=true;	//调用的是button的内置属性
                }else{
                 
                    this.msgcodeinfo='发送验证码'
                    this.count=''
                    this.disabled=false	//不允许点击按钮
                    clearInterval(interval);	//清除定时器
                    interval = null;	//定义为null 不再循环
                }

            },1000)		//1s执行一次

            }
}