vue自定义获取验证码组件，倒计时60秒

---

多读多写多记录，多学多练多思考。----------- Grapefruit.Banuit Gang(香柚帮)

---

自定义一个获取验证码的组件，点击按钮实现倒计时60秒

1.首先在页面html中写两个按钮，用v-show指令控制其显示隐藏

//页面按钮
    <button @click="getCode" id="d" class="getphone" v-show="show">获取验证码</button>
    <button class="blue" v-show="!show" disabled="disabled">{{count}}秒后重新发送</button>

2.javaScript中逻辑

data(){
    return {
        count: '',
        timer: null,
        show: true,
    }
},
methods:{
    getCode() {
      const num = 60;
      if (!this.timer) {
        this.count = num;
        this.show = false;
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= num) {
            this.count--;
          } else {
            this.show = true;
            clearInterval(this.timer);
            this.timer = null;
          }
        }, 1000);
    }
},

3.最后再设计一下样式就大工告成了

.getphone {
  display: block;
  height: 46px;
  font-size: 22px;
  color: #aaaaaa;
  border: 1px solid #e6e6e6;
  text-align: center;
  border-radius: 23px;
  background: white;
  box-sizing: border-box;
  padding:0 20px;
  line-height: 46px;
}


.blue {
  color: #508bef;
  display: block;
  height: 46px;
  line-height: 46px;
  font-size: 22px;
  text-align: center;
  border: 1px solid #e6e6e6;
  border-radius: 23px;
  box-sizing: border-box;
  padding:0 20px;
}

注：此方法并不只适用于vue,其他的也适用，只是稍微改动代码即可！

好了，就是这些了，希望能帮助到一些朋友吧！！！