vue 验证码倒计时60s

最新推荐文章于 2024-06-25 12:02:02 发布

zhooson

最新推荐文章于 2024-06-25 12:02:02 发布

阅读量1.3w

点赞数 5

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/Zhooson/article/details/75228666

版权

vue 专栏收录该内容

67 篇文章 1 订阅

订阅专栏

//html
 <div class="input-div" v-show="formData.phone">
     <input type="text" class="input code" name="code" v-model.trim="formData.code" placeholder="验证码">
     <button @click="getCode(formData)" class="code-btn" :disabled="!show">
         <span v-show="show">获取验证码</span>
         <span v-show="!show" class="count">{{count}} s</span>
     </button>
</div>

//js
const TIME_COUNT = 60;
 data(){
      return {
        formData: {
          phone:'',
          code:'',
        },
        show: true,
        count: '',
        timer: null,
      }
    },

    methods:{
        getCode(formData){
            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)
              }
        }   
    }