获取验证码倒计时

最新推荐文章于 2024-10-26 18:28:23 发布

苏小画

最新推荐文章于 2024-10-26 18:28:23 发布

阅读量920

点赞数 1

CC 4.0 BY-SA版权

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

本文链接：https://blog.csdn.net/weixin_44404444/article/details/114644575

vue 专栏收录该内容

17 篇文章

订阅专栏

本文介绍了一种基于Vue.js的验证码倒计时按钮的实现方法。点击按钮后，按钮变为加载状态并开始60秒倒计时，在倒计时结束后按钮恢复原状并可再次点击。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述
1.点击获取验证码按钮，样式变成转圈圈并且开始倒计时
2.倒计时结束，恢复开始样式

<template>
<div>
 <el-button type="primary" v-if="q" @click="btn()">获取验证码</el-button>
<el-button type="primary" :loading="true" v-else>{{counter}}</el-button>
</div>
</template>
<script>
  export default {
    data() {
      return {
        q:true,
      counter:60,
      timer:null
           
      };
    },
    methods: {
      btn(){
        this.q=false;
       this.StartCounter()
      },
      StartCounter(){
        this.timer=setInterval(()=>{
          this.counter--
          if(this.counter<=0){
            this.counter=0
            clearInterval(this.timer)
            //清除定时器
            this.q=true
            this.counter=60;
          }
        },1000)
        
      }
       
    }
  }
</script>