Vue实战088简单的验证码倒计时功能实现

　　这是个发送验证码时常用的功能，当用户点击【发送验证码】之后出现【重新获取60s后】。在倒计时期间禁止用户继续发送验证码，待倒计时结束之后才可以再次发送验证码。这个可以避免重复发送请求获取多个验证码信息（但是只有最后一次才是有效的），你也不知道自己发送了几次请求，当手机接收到验证码之后容易误以为是正确的验证码。所以做适当的控制是非常有必要的，同时也可以防止恶意发送请求消耗服务器资源。
　　HTML构建
　　为了方便这里我们用ElementUI来实现，在el-form-item中利用el-button按钮来实现验证码发送。发送验证码之后直接在el-button上修改现实中在HTML中的【发送验证码】内容，利用disabled属性来控制el-button的是否可以点击。
　　重新获取倒计时
　　定义一个retrieve()方法开启倒计时功能，利用setInterval计时器每隔一秒钟调用一次函数，当倒计时结束时通过clearInterval()来关闭计时器。这里我们需要做的是刷新时间和重定义el-button中的HTML内容，disable是用来控制el-button按钮是否可点击的属性。注意：disabled属性别用this.$refs.onConfirm.disbaled=true来定义，会报警告的：Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop＂s value. Prop being mutated: ＂disabled＂。
　　发送验证码
　　在发送之前我们需要对表单中的数据进行校验，这里为什么要嵌套两个validateField呢（validateField支持校验组数）？。因为validateField校验子表单数据时每校验一个值都会返回校验结果，当校验不通过时Error返回值为校验的提示信息，当通过时Error的值为空，所以我们在if语句中用(！Error）表示校验通过。那么这就存在一个问题如果校验数组的话就会进行多次校验，也就会发送多次验证请求。（点一次请求却收到多条验证码这显然是不合理的！）
　　总结：
　　这里主要的就是retrieve()方法的定义和动态改变HTML内容，可以利用Vue提供的$ref来快速的定位DOM元素实现属性的修改。以上内容是小编给大家分享的【Vue实战088：简单的验证码倒计时功能实现】，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。更多Vue实战技巧可以参考以下专栏：
　　为了方便学习，下面附上本文用到的源码：           发送验证码  retrieve(){   this.timer= 10   var that = this;   console.log(that.$refs.onConfirm)   var timer_interval = setInterval(function(){       if(that.timer > 0 ){           that.timer -- ;           that.disable=true             that.$nextTick(()=>{               that.$refs.onConfirm.$el.children[0].innerHTML= ＂重新获取＂+that.timer+＂s＂             })        }else{           clearInterval(timer_interval);           that.$refs.onConfirm.$el.children[0].innerHTML= ＂重新获取＂           that.disable=false       }   },1000); } sendCode() {     this.$refs.rulesForm.validateField(＂userid＂,(error)=>{       if(!error){         this.$refs.rulesForm.validateField(＂tel＂,(error)=>{           if(!error){               return new Promise((resolve, reject) => {               SendCode(this.userForm).then(res=>{                 if(res.data){                     this.retrieve()                     this.phoneCode=res.data.message                     this.$message({                       message:＂验证码已发送，请注意查收！＂,                       type: ＂success＂                     })                 }               resolve()           }).catch( error => { reject(error) } )         })}         })       }else{ return }     }) },