Vue写一个简单的倒计时

 

我们需求是发送验证码,倒计时60秒,并且,点击发送验证码之后,不能点击,只有60s过后才能再次点击

 

<button class="button" @click="sendCode">{{content}}</button>


<script>
    export default{
        data(){
            return {
                content:'发送验证码',
                totalTime:60,   //倒计时
                canClick:true, //添加canClick
            }
		},

       methods:{
            sendCode(){
                  if(!canClick){return}  //节流   
                   this.canClick=false;
                   this.content = this.totalTime + 's后重新发送'
                   let clock = window.setInterval(() => {
                   this.totalTime--;
                  this.content = this.totalTime + 's后重新发送'
                  if (this.totalTime < 0) {  //当倒计时小于0时清除定时器
                       window.clearInterval(clock); //关闭
                       this.content = '重新发送验证码'
                       this.totalTime = 60;
                       this.canClick = true; //这里重新开启
                          }
                     },1000)
                    }
                }
           }

</script>