vue项目60秒内禁止按钮再次被点击

用于获取验证码时防止用户多次触发

按钮：

<el-button style="padding:8px" size="mini" :disabled ="canGet" @click="getCode">{
    
    {
    
    btnText}}</el-button>

data中相关的数据

data(){
    
    
	return {
    
    
			canGet:false,    //获取验证码按钮是否禁用
            time:0,
            btnText: "获取验证码",
            timer:null,
	}
}

逻辑

getCode(){
    
       //获取验证码
            let phoneReg = /^[1][3,5,7,8][0-9]{9}$/;
            if(!phoneReg.test(this.userForm.mobile)){
    
        //发请求时先正则检验下手机号
                this.$message({
    
    
                    showClose: true,
                    message: "请检查手机号后重试",
                    type: "warning"
                })
                return;
            }
            this.canGet = true;  //禁用按钮，防止多次触发
            this.time = 60;  //60秒后能继续按按钮
            this.timer1();
            
        },
        

timer1(){
    
       //验证码60s内不能继续点击的函数
            if(this.time > 0) {
    
    
                this.time--;
                this.btnText = this.time + "s后重新获取"
                this.timer = setTimeout(this.timer1,1000)
            }else{
    
    
                this.time = 0;
                this.btnText = "获取验证码";
                this.canGet = false;
                clearTimeout(this.timer);
            }
        },