vue 定时器

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>