Vue實(shí)現(xiàn)手機(jī)號(hào)、驗(yàn)證碼登錄（60s禁用倒計(jì)時(shí)）

更新時(shí)間：2020年12月19日 16:33:13 作者：劉彤彤

這篇文章主要介紹了Vue實(shí)現(xiàn)手機(jī)號(hào)、驗(yàn)證碼登錄（60s禁用倒計(jì)時(shí)），幫助大家更好的理解和使用vue，感興趣的朋友可以了解下

最近在做一個(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)就上代碼吧！

html

<el-button @click="getCode()" :class="{'disabled-style':getCodeBtnDisable}" :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.dhdzp.com/article/202496.htm

css設(shè)置不可點(diǎn)擊時(shí)置灰

.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 = this
        that.waitTime--
        that.getCodeBtnDisable = true
        this.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 = false
                that.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)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: