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

桃扇骨 2021-12-14 05:57 990阅读 0赞

--------------------

**多读多写多记录，多学多练多思考。----------- 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,其他的也适用，只是稍微改动代码即可！

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