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

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);
                
            },

Logo

前往低代码交流专区

更多推荐