vue简单实现发送验证码倒计时

最新推荐文章于 2024-02-07 17:14:57 发布

原创最新推荐文章于 2024-02-07 17:14:57 发布 · 2.7k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

前端开发专栏收录该内容

32 篇文章

订阅专栏

本文介绍了一种基于Vue.js的验证码倒计时功能实现方式。通过点击按钮启动倒计时，达到设定时间后恢复初始状态。具体实现了验证码获取后的等待时间逻辑，包括显示倒计时、禁用再次获取功能直至倒计时结束。

<span v-show="show" @click="getCode">获取验证码</span>
<span v-show="!show" class="count">{{count}} s</span>


data(){
  return {
   show: true,
   count: '',
   timer: null,
  }
 },
 methods:{
   getCode(){
     const 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)
      }
   }  
 }