vue 获取验证码按钮，点击后开始倒计时

最新推荐文章于 2024-05-29 11:39:33 发布

Shelly-L

最新推荐文章于 2024-05-29 11:39:33 发布

阅读量700

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_52177667/article/details/122698253

版权

第一步

data() {
    return {
     
      disableCode: false,
      getCode: this.$t('login.obtaining'), // 按钮显示的内容
      isGeting: false,
      count: 60
    }
  },

第二步

<el-button
    class="validateImg"
    type="primary"
   :disabled="disableCode"
   :class="{ codeGeting:isGeting }"
  @click.stop="getVerifyCode"
>{{ getCode }}</el-button>

第三步

// 点击按钮倒计时
    getVerifyCode() {
      var countDown = setInterval(() => {
        if (this.count < 1) {
           this.isGeting = false
           this.disableCode = false
           this.getCode = this.$t('login.obtaining')
           this.count = 60
           clearInterval(countDown)
         } else {
           this.isGeting = true
           this.disableCode = true
           this.getCode = this.count-- + 's' + this.$t('login.resend')
        }
      }, 1000)
    },