js+vue倒计时60秒按钮可点击

效果图：

1、页面代码

<TabPane label="修改手机号" name="ph">
    <Form class="form_phone" hide-required-mark :model="formItemPh" ref="phoneModify" :rules="ruleValidatePh" :label-width="120">
    <FormItem label="原手机号" prop="oldPhone">
	             <Input type="text" v-model="formItemPh.oldPhone" style="width:206px;"  maxlength="11"/>
	     </FormItem>
	     <FormItem label="新手机号" prop="newPhone">
	         <Row>
	            <Col span="8">
	             <Input type="text" v-model="formItemPh.newPhone" placeholder="请输入新手机号" maxlength="11"/>
	             </Col>
	             <Col span="16">
	                   <Button type="success" :disabled="codeBtn.btnStatus" :class="{'forbban': codeBtn.btnStatus}" @click="getPhoneCode">{{codeBtn.btnText}}</Button>
	             </Col>
	     		 </Row>
	       </FormItem>
	       <FormItem label="验证码" prop="code">
	            <Input type="text" v-model="formItemPh.code" placeholder="请输入验证码" style="width:206px;" maxlength="6"/>
	        </FormItem>
	              <FormItem>
	       <Button type="primary" class="btn" @click="savePhone">保存</Button>
	     </FormItem>
  </Form>
 </TabPane>

2、绑定参数

data(){
  return{
       codeBtn:{
	      btnStatus:false,
	        btnText:'获取验证码',
	        btnType:'primary'
	    },
	    timer: null
	}
}

3、倒计时和调用

/**
 * @description 获取手机验证码，调取接口获取返回的验证码
 */
getPhoneCode(){
    // 获取验证码后禁用按钮
    this.codeBtn.btnStatus = true
    // 模拟接口测试
    setTimeout(()=>{
       this.countDown(60)
    },5)
},
 /**
  * @description 倒计时方法
  */
countDown(val){
    //判断定时器是否存在
    if(this.timer){
        clearInterval(this.timer)
    }
    this.codeBtn.btnText ='发送中'
    this.codeBtn.btnStatus = false
    //setTiemOut 执行一次
    // setInterval 不断执行，需要条件才会停止
    let tim = val;
    this.timer = setInterval(()=>{
        tim--;
        if(tim === 0){
            clearInterval(this.timer)
            this.codeBtn.btnStatus = false
            this.codeBtn.btnText ='重新获取'
        }else{
            this.codeBtn.btnStatus = true
            this.codeBtn.btnText = `倒计时${tim}秒`
        }
    },1000)
},
 /**
  * @description 清除倒计时
  */
 clearCountDown(){
     this.codeBtn.btnStatus = false;
     this.codeBtn.btnText ='获取验证码';
     //清除倒计时
     clearInterval(this.timer);
 }
}