這是個發送驗證碼時常用的功能，當用戶點擊【發送驗證碼】之後出現【重新獲取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實戰技巧可以參考以下專欄：
為了方便學習，下面附上本文用到的源碼：
<code>
發送驗證碼
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 }
})
},/<code>
