vue 倒数60s 获取验证码
1.页面代码
<Form
ref="formValidate"
:model="form"
:rules="ruleValidate"
:label-width="80"
label-position="left"
>
<FormItem class="code-input" label="验证码" prop="authCode">
<Input
v-model="form.authCode"
placeholder="输入验证码"
/>
<Button
@click="getCode()"
type="primary"
:class="{ 'disabled-style': getCodeBtnDisable }"
:disabled="getCodeBtnDisable"
>{{ codeBtnWord }}</Button
>
</FormItem>
</Form>
2.数据
const wait = 61
data(){
return {
form: {
authCode: ''
},
codeBtnWord: '获取验证码', // 获取验证码按钮文字
waitTime: wait, // 获取验证码按钮失效时间
ruleValidate: {
authCode: [
{
min: 6,
max: 6,
required: true,
message: '请输入6位验证码',
trigger: 'blur'
}
]
}
}
},
computed: {
getCodeBtnDisable: {
get() {
if (this.waitTime == wait) {
if (this.phoneIsValidate && this.nameIsValidate) {
return false
}
return true
}
return true
},
}
},
3.函数
async getCode() {
if (!this.getCodeBtnDisable) {
let res = await api.sendPhoneAuthCode({
phoneNumber: this.form.phoneNumber
})
console.log(res)
if (res) {
this.waitTime--
this.getCodeBtnDisable = true
this.codeBtnWord = `${this.waitTime}s 后重新获取`
let timer = setInterval(() => {
if (this.waitTime > 1) {
this.waitTime--
this.codeBtnWord = `${this.waitTime}s 后重新获取`
} else {
clearInterval(timer)
this.codeBtnWord = '获取验证码'
this.getCodeBtnDisable = false
this.waitTime = wait
}
}, 1000)
}
}
},