看效果图:
代码
<a-button
@click="getSms"
:disabled="myState.smsSendFlag"
v-text="(!myState.smsSendFlag && '获取验证码') || `${myState.time} s`"
></a-button>
data(){
return {
myState: {
smsSendFlag: false,
time: 60
}
}
}
async getSms() {
const hide = this.$message.loading('验证码发送中..', 0)
let params = {
sms: userPhone
}
try {
let { state, data, message } = await AccountApi.sendResetSms(params)
if (state === 200) {
this.myState.smsSendFlag = true
const interval = setInterval(() => {
if (this.myState.time-- <= 0) {
this.myState.time = 60
this.myState.smsSendFlag = false
clearInterval(interval)
}
}, 1000)
} else {
this.$message.error(message)
}
} catch (error) {
this.$message.error('网络请求连接失败~')
}
setTimeout(hide, 1)
},