今天突发奇想写个手机号注册的功能。当我可以通过前端的按钮发送短信之后，想起了网爆的最基础方式，疯狂发送验证码短信。于是乎为了保护我那少的可怜的几条短信(还是白嫖的腾讯云的)，需要做到前端的按钮只能够一分钟点一下(有人说我完全可以通过F12直接查看请求，然后postman疯狂发送。那种情况再说，今天就做一个在前端限制点击的按钮)。

<el-form-item label="验证码" prop="verificationCode" >
  <el-input type="text" v-model="ruleForm.verificationCode" placeholder="验证码" style="width: 80%;">
   <el-button slot="append" :disabled="!canClick" @click="getVerificationCode">{{ getCode }}</el-button>
  </el-input>
</el-form-item>

data(){
  return {
    getCode:'获取验证码',
    canClick:true, // 验证码是否禁用
    totalTime:60
  }
}

methods:{
  //倒计时
 verificationCode () {
   if (!this.canClick) return  
   this.canClick = false
   this.getCodeText = this.totalTime + 's后重新发送'
   let clock = window.setInterval(() => {
     this.totalTime--
     this.getCodeText = this.totalTime + 's后重新发送'
     if (this.totalTime < 0) {
       window.clearInterval(clock)
       this.getCodeText = '重新发送验证码'
       this.totalTime = 60
       this.canClick = true  
     }
   },1000)
 }
}

不要问我verificationCode这个方法用在哪里，你猜你猜啊（必然是只在发送验证码成功后才开始倒计时啊，发送验证码的方法axios）

实现效果：