当前位置: 首页>编程日记>正文

js 倒计时

js 倒计时,第1张

<template>
  <div>
    <el-button class="captcha-btn" type="primary" @click="sendSms()">{{ sendContent }}</el-button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      sendContent: '获取验证码',
      smsWait: 0,
      smsSwitch: false
    }
  },
  methods: {
    // 发送验证码
    async sendSms () {
      if (this.smsWait !== 0 || this.smsSwitch) {
        return false
      }
      this.smsSwitch = true
      // 次处掉接口
      this.smsSwitch = false
      this.smsWait = 60
      this.waitSms()
      this.smsInterval = setInterval(() => {
        this.waitSms()
      }, 1000)
    },
    waitSms () {
      this.smsWait--
      if (this.smsWait === 0) {
        clearInterval(this.smsInterval)
        this.sendContent = '重新获取验证码'
      } else {
        this.sendContent = this.smsWait + '秒后重新获取'
      }
    }
  }
}
</script>

<style>
</style>

相关文章: