vue 获取验证码倒计时
思路:点击“获取验证码”,向后台请求成功,按钮不可点击,时间倒计时;HTML:<Button @click="getCodeFun" :disabled="disabled" > <template v-if="sending">
思路:点击“获取验证码”,向后台请求成功,按钮不可点击,时间倒计时;
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);
},
更多推荐
所有评论(0)