uniapp | 发送手机验证码 button组件

一、功能和效果展示

1.组件功能

uniapp
（1）按钮初始显示“发送”，点击按钮后按钮显示倒计时60s；
（2）倒计时60s期间点击按钮，不会重置计时器；
（3）倒计时60s结束后，按钮恢复初始状态，显示“发送”；

2.效果展示

3.核心思路

1. 点击“发送验证码”button，即可触发getCode()
2. 设置time=60，timer为定时器
3. 当time从60自减到0后，清除timer定时器，下次再点击就会重新倒计时60秒
4. 若在timer定时器未被消除即time仍处于(0,60)范围时，点击“获取验证码”button触发的getCode()会直接return出去

getCode(){
   
  if(this.timer > 0) return
  //定时器timer
  this.timer = null
  //倒计时60秒
  this.time = 60
  //每秒 time--
  this.timer = setInterval(()=>{
   
    this.time--
    if(this.time<= 0){
   
      //当time从60自减到0后，清除timer定时器，下次再点击就会重新倒计时60秒
      clearInterval(this.timer)
    }
  },