最近在做一個(gè)Vue項(xiàng)目，前端通過(guò)手機(jī)號(hào)、驗(yàn)證碼登錄，獲取驗(yàn)證碼按鈕需要設(shè)置60s倒計(jì)時(shí)（點(diǎn)擊一次后，一分鐘內(nèi)不得再次點(diǎn)擊）。先看一下效果圖：

輸入正確格式的手機(jī)號(hào)碼后，“獲取驗(yàn)證碼”按鈕方可點(diǎn)擊；點(diǎn)擊“獲取驗(yàn)證碼”后，按鈕進(jìn)入60s倒計(jì)時(shí)，效果圖如下：

　效果圖已經(jīng)有了，接下來(lái)就上代碼吧！

<el-button @click='getCode()' : :disabled='getCodeBtnDisable'>{{codeBtnWord}}</el-button> 數(shù)據(jù)data

data() { return {loginForm: { phoneNumber: ’’, verificationCode: ’’,},codeBtnWord: ’獲取驗(yàn)證碼’, // 獲取驗(yàn)證碼按鈕文字waitTime:61, // 獲取驗(yàn)證碼按鈕失效時(shí)間 }} 計(jì)算屬性computed

computed: { // 用于校驗(yàn)手機(jī)號(hào)碼格式是否正確 phoneNumberStyle(){let reg = /^1[3456789]d{9}$/if(!reg.test(this.loginForm.phoneNumber)){ return false}return true }, // 控制獲取驗(yàn)證碼按鈕是否可點(diǎn)擊 getCodeBtnDisable:{get(){ if(this.waitTime == 61){if(this.loginForm.phoneNumber){ return false}return true } return true},// 注意：因?yàn)橛?jì)算屬性本身沒(méi)有set方法，不支持在方法中進(jìn)行修改，而下面我要進(jìn)行這個(gè)操作，所以需要手動(dòng)添加set(){} }}

關(guān)于上面給計(jì)算屬性添加set方法，可以參照//www.jb51.net/article/202496.htm

.el-button.disabled-style { background-color: #EEEEEE; color: #CCCCCC;} mothods中添加獲取驗(yàn)證碼方法

getCode(){ if(this.phoneNumberStyle){let params = {}params.phone = this.loginForm.phoneNumber// 調(diào)用獲取短信驗(yàn)證碼接口axios.post(’/sendMessage’,params).then(res=>{ res = res.data if(res.status==200) {this.$message({ message: ’驗(yàn)證碼已發(fā)送，請(qǐng)稍候...’, type: ’success’, center:true}) }})// 因?yàn)橄旅嬗玫搅硕〞r(shí)器，需要保存this指向let that = thisthat.waitTime--that.getCodeBtnDisable = truethis.codeBtnWord = `${this.waitTime}s 后重新獲取`let timer = setInterval(function(){ if(that.waitTime>1){that.waitTime--that.codeBtnWord = `${that.waitTime}s 后重新獲取` }else{clearInterval(timer)that.codeBtnWord = ’獲取驗(yàn)證碼’that.getCodeBtnDisable = falsethat.waitTime = 61 }},1000) }}

通過(guò)上面的代碼，就可以實(shí)現(xiàn)了，如有錯(cuò)誤，敬請(qǐng)指正！

以上就是Vue實(shí)現(xiàn)手機(jī)號(hào)、驗(yàn)證碼登錄（60s禁用倒計(jì)時(shí)）的詳細(xì)內(nèi)容，更多關(guān)于vue 手機(jī)號(hào)驗(yàn)證碼登錄的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章！