Vue实现验证码的60s倒计时

文章预览

菜鸟Java程序员，因为公司没有前端，嗯，是的，没有前端，新项目采用vue进行开发，所以开始接触。。。
废话不多说，直接上代码。

html代码

使用的是element-ui

<el-button v-if="show" type="danger" style="background-color: #de8080;border-color: #de8080" @click="getPhoneCode">获取验证码</el-button>
<span v-if="!show" style="color: #707070;">{{count}}s后重新获取</span>

js部分

data(){
    return {
        show:true,
        count:"",
        timer:null,
    }
}

getPhoneCode(){
      let TIME_COUNT = 60;
      if (!this.timer) {
        this.count = TIME_COUNT;
        this.show = false;
        this.timer = setInterval(()=>{
          if (this.count > 0 && this.count <= TIME_COUNT){
            this.count--;
          }else {
            this.show = true;
            clearInterval(this.timer);
            this.timer = null;
          }
        },1000)
      }
    }

注意：如果有非正常结束倒计时，然后重新点击开始新的倒计时，需要调用clearInterval()方法，否则倒计时的时间会变快

--- 我是一块砖，哪里有用哪里搬

………………………………