vue 获取验证码倒计时

思路：点击“获取验证码”，向后台请求成功，按钮不可点击，时间倒计时；

HTML：

<Button @click="getCodeFun" :disabled="disabled" >
                            <template v-if="sending">
                                获取验证码
                            </template>
                            <template v-else>
                               {{second}}秒后重发
                            </template>                            
</Button>

 

JS：

                sending: true,      //是否发送验证码
                disabled: false,   //是否禁发验证码
                second:60,        //倒计时间

 

getCodeFun()
            {

               //his.sending原为true,请求成功，!this.sending == true，主要是防止有人把disabled属性去掉，多次点击；
                if( !this.sending )
                    return;

                getCode(this.params.phone).then( res => {
                    this.sending  = false;
                    this.disabled = true;
                    this.timeDown();
                });
            },
            timeDown()
            {
                let result = setInterval( ()=>{
                    --this.second;
                    if(this.second < 0)
                    {
                        clearInterval(result);
                        this.sending  = true;
                        this.disabled = false;
                        this.second = 60;
                    }                   
                }, 1000);
                
            },