vue 倒计时 demo
<template>
<input type="button" :disabled="!sendBtnStatus" :value="sendMsg" :class="sendBtnStatus ? 'sendBtn' : 'disabledBtn'" v-on:click="sendEmail()"/>
</template>
<script>
export default {
data () {
return {
sendBtnStatus:true, // 控制该按钮是否可点击
sendMsg: 'Send Code' // 按钮显示的名称
}
},
methods: {
sendEmail () {
this.emailLogin = this.langData.emailLoginCon
let url = https.......... //
this.axios.post(urlToSendEmail).then((res) => {
if (res.data.status === 0) {
this.sendBtnStatus = false // 获取邮箱验证码按钮
this.sendMsg = this.langData.Send_again + '(' + this.countEmailDown + ')s'
let clock = window.setInterval(() => {
this.countEmailDown--
this.sendMsg = this.langData.Send_again + '(' + this.countEmailDown + ')s'
if (this.countEmailDown < 0) {
window.clearInterval(clock)
this.sendMsg = this.langData.Send_again
this.countEmailDown = 60
this.sendBtnStatus = true // 这里重新开启
}
}, 1000)
} else {
this.$message.error(res.data.message)
}
})
}
}
</script>