JS 倒计时获取验证码按钮

vue中的写法实现倒计时按钮
常用于发送验证码

/* css */
.yzm{
    width: 150px;
    height: 30px;
    background-color: #f00;
    border: 0;
    outline: 0;
    border-radius: 15px;
    color: #fff;
}

.dis{
    background-color: #eee;
    color: #ccc;
    cursor: not-allowed;
}

<!-- html -->
<input ref="yzm" @click="disclick" class="yzm" :class="dis? 'dis':''" :value="value" type="button" />

//data
value:'',//按钮上的字
time:'',//定时器名字，方便清除

// js methods
disclick(){
	// 按钮变化                   
	that.dis=1;
    that.$refs.yzm.disabled=true
    var i=10// 验证码重来获取时间
    that.value=i+'秒';
    that.time=setInterval(()=>{
      if(i==1){
        clearInterval(that.time);
        that.time=null;
        that.$refs.yzm.disabled=false;
        that.dis=0;
        that.value='获取验证码'
      }else{
        i--;
        that.value=i+'秒';
      }
    },1000)

	// 下面可发送请求（即调用发送验证码接口）
	// ...
}