vue发送邮箱验证码，倒计时效果的实现—JavaScript通用

页面结构：

<el-col :span="4">
     <el-button type="primary" @click="sendEmail" v-if="!isCountDowning">发送</el-button>
     <el-button type="primary" @click="sendEmail" v-else>{{countText}}</el-button>
</el-col>

data结构：

  data() {
    return {
      countText:'60(S)',
      isCountDowning:false,
    }
  },

参数解释：

countText：倒计时时候显示的文字，会根据函数改变

isCountDowning：是否正在倒计时，用来动态显示按钮

倒计时函数：

这个函数在JavaScript里面通用，更多技巧可以参考MDN文档

    startCountDown(){
      //开始倒计时
      let time = 60;//初始化倒计时的时间为60秒
      this.isCountDowning = true;//是否正在倒计时
      let that = this;//复制this指针，因为下面的函数中会改变
      let intverval = setInterval(function (){
        //执行倒计时内容
        time--;
        if (time <= 0){
          that.isCountDowning = false;
          clearInterval(intverval);//清除倒计时
        }
        that.countText = time + '(S)'
      },1000)
    },

调用函数：

sendEmail(){
      this.checkEmail();
      api.sendVerifyCode(this.registerDate.email,'register').then(res =>{
        //如果发送成功，则开始倒计时
        if (res.code === api.SUCCESS_CODE){
          console.log(res)
          this.startCountDown();
        }else{
          //否则给出提示
          Notice.openNotice(res.message,"出错啦",'error');
        }
      })
    },