vue中实现定时器功能

最新推荐文章于 2024-08-14 13:14:59 发布

爱学习的大雄

最新推荐文章于 2024-08-14 13:14:59 发布

阅读量2k

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_49137582/article/details/128619845

版权

vue 专栏收录该内容

23 篇文章 1 订阅

订阅专栏

引言

在使用vue开发注册页面的时候，需要完成获取邮箱验证码，然后获取按钮进入一分钟倒计时无法点击的需求。大概结果如下图

代码示例

按钮

<el-button :disabled="sendCodeDisabled" @click="getCode">
          {{ sendCodeBtnWord }}
        </el-button>

data

sendCodeTime: 60,
sendCodeDisabled: false,
sendCodeBtnWord: "获取",
timer: null

method

//在需要调用定时功能的方法中去调用sendCode就可以了
    getCode(){
      if (this.registerForm.email !==null && this.registerForm.email.trim() !==''){
        sendVerifyCode(this.registerForm.email).then(res =>{
          this.registerForm.redisKey = res.data;
          this.$message.success("发送成功")
          //这里调用定时器
          this.sendCode()
        })
      }else {
        this.$message.warning("未输入邮箱")
      }

    },
//主要是下面这3个方法
    sendCode(){
      this.sendCodeDisabled=true
      this.startTimer();  //启动定时器
      this.timer = setInterval(() =>{
        //创建定时器
        if(this.sendCodeTime === 0){
          this.clearTimer();  //关闭定时器
        }else{
          this.startTimer();
        }
      },1000);
    },
    startTimer(){
      //启动定时器
      this.sendCodeTime--;  //定时器减1
      this.sendCodeBtnWord= this.sendCodeTime+'s'
    },
    clearTimer(){
      //清除定时器
      clearInterval(this.timer);
      this.timer = null;
      this.sendCodeBtnWord="获取"
      this.sendCodeDisabled=false;
      this.sendCodeTime=60;
    }