VUE实现点击验证码倒计时60s

最新推荐文章于 2024-09-14 10:51:24 发布

进击的小宋

最新推荐文章于 2024-09-14 10:51:24 发布

阅读量328

点赞数

本文链接：https://blog.csdn.net/qq_44655358/article/details/108548294

版权

写项目时候用到了
但是后来更改了验证方式暂时没有使用
写篇博客记录下来

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

<script>
export default {
  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) }} ,
</script>