Implement timer function in vue

introduction

When using vue to develop the registration page, you need to complete the requirement to obtain the email verification code, and then obtain the button that enters the one-minute countdown and cannot be clicked. The approximate result is as follows

code example

button

<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;
    }

Effect

Before clicking the Get button

After clicking the get button