今天就跟大家聊聊有關(guān)使用Vue怎么實現(xiàn)一個驗證碼登錄功能，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

創(chuàng)新互聯(lián)公司是一家專注網(wǎng)站建設(shè)、網(wǎng)絡(luò)營銷策劃、小程序開發(fā)、電子商務(wù)建設(shè)、網(wǎng)絡(luò)推廣、移動互聯(lián)開發(fā)、研究、服務(wù)為一體的技術(shù)型公司。公司成立十多年以來，已經(jīng)為上1000+成都三維植被網(wǎng)各業(yè)的企業(yè)公司提供互聯(lián)網(wǎng)服務(wù)?，F(xiàn)在，服務(wù)的上1000+客戶與我們一路同行，見證我們的成長；未來，我們一起分享成功的喜悅。

• html

{{codeBtnWord}}

• 數(shù)據(jù)data

data() {
     return {
        loginForm: {
            phoneNumber: '',
            verificationCode: '',
        },
        codeBtnWord: '獲取驗證碼', // 獲取驗證碼按鈕文字
        waitTime:61, // 獲取驗證碼按鈕失效時間
    }
}

• 計算屬性computed

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

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

•  css設(shè)置不可點擊時置灰

.el-button.disabled-style {
    background-color: #EEEEEE;
    color: #CCCCCC;
}

• mothods中添加獲取驗證碼方法

getCode(){
    if(this.phoneNumberStyle){
        let params = {}
        params.phone = this.loginForm.phoneNumber
        // 調(diào)用獲取短信驗證碼接口
        axios.post('/sendMessage',params).then(res=>{
            res = res.data
            if(res.status==200) {
                this.$message({
                    message: '驗證碼已發(fā)送，請稍候...',
                    type: 'success',
                    center:true
                })
            }
        })
        // 因為下面用到了定時器，需要保存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 = '獲取驗證碼'
                that.getCodeBtnDisable = false
                that.waitTime = 61
            }
        },1000)
    }
}

看完上述內(nèi)容，你們對使用Vue怎么實現(xiàn)一個驗證碼登錄功能有進一步的了解嗎？如果還想了解更多知識或者相關(guān)內(nèi)容，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝大家的支持。

文章標題：使用Vue怎么實現(xiàn)一個驗證碼登錄功能-創(chuàng)新互聯(lián)
轉(zhuǎn)載注明：http://weahome.cn/article/esphh.html