vue中点击获取验证码倒计时60秒

点击获取短信验证码倒计时60秒
点击后，获取短信验证码按钮禁止点击，后台有返回时，才进行倒数，

<temlplate>
<el-form :model="registerdeFormData" :rules="regrules">
	<el-form-item prop="phoneNum">
		<el-input v-model="phoneNum" placeholder="请输入手机号码"></el-input>
	</el-form-item>
	<el-form-item prop="phoneNum">
		<el-input v-model="phoneNum" placeholder="请输入手机号码"></el-input>
		<el-button type="text" @click="getCode" :disabled="codeDisabled">{{codeMsg}}</el-button>
	</el-form-item>
	</el-form>
</template>

data(){
	var validatePhone = (rule,value,callback)=>{
		if(value == ''){
			callback(new Error('请输入手机号'))
		}else{
			if(value !==''){
				var reg = /^1[13456789]\d{9}$/;
				if(!reg.test(value)){
					callback(new Error('手机号输入错误'))
				}else{
					//手机号码输入正确时才可点击获取验证码按钮
					this.codeDisabled = false;
				}
			}
			callback();
		}
			
	}
	return{
		timer:null,
		errorTxt:'',
		countdown:60,
		codeMsg:'获取短信验证码',
		codeDisabled:true,
		phoneNum:'',
		regrules:{
			phoneNum:[
				{validator:validatePhone,trigger:"change"}
			]
		}
	}
},
methodes:{
	getCode(){
		if(this.phoneNum !=='' ){
			this.codeDisabled = true;
			let data = {
				phoneNum:this.phoneNum
			} 
			this.$Api.smscodeRegister(data).then(res=>{
					if(res.code == 200){
						if(!this.timer){
							this.timer = setInterval(()=>{
								if(this.countdown>0&& this.countdown<=60){
									this.countdown == ;
									if(this.countdown !== 0){
										this.codeDisabled = true;
										this.codeMeg = '重新发送('+this.countdown+')';
									}else{
										clearInterval(this.timer);
										this.codeMeg  = "获取短信验证码";
										this.countdown  = 60;
										this.timer = null;
										this.codeDisabled  = false;
									}
								}
							},1000)
						}
					}else{
					this.message({
						message:res.message,
						type:'error'
					})
					this.codeDisabled  = false;
					}
			})
		}
	}
}