验证码 倒计时 vue 操作对象

//html
<input type="number" v-model="phoneNumber"  placeholder="请输入手机号"/>
<input type="number" v-model="phoneCode" placeholder="请输入验证码"/>
<span style="color: #EA5504;" @click="sendMessage($event)">发送验证码</span>

//数据
data:{
    phoneNumber: '',
    phoneCode: '',

    num: 60,
    count: 60    
}

//方法
sendMessage(element){
                if(null == this.phoneNumber || undefined == this.phoneNumber || '' == this.phoneNumber){
                    vant.Toast({position:'bottom',message:'请先输入手机号', duration:1000});
                    return;
                }
                if (!(/^1[3456789]\d{9}$/.test(this.phoneNumber))) {
                    vant.Toast({position:'bottom',message:'请输入正确的手机号码', duration:1000});
                    return;
                }
                var that = this;
                if(that.num > 0 && that.num < that.count){
                    return;
                }
                var timer = setInterval(function () {
                    that.num = that.num -1;
                    element.target.innerHTML = that.num + 's后重新获取'
                    element.target.style.color = 'gray'
                    element.target.disabled = 'disabled'
                    if (that.num === 0) {
                        element.target.disabled = ''
                        element.target.style.color = ' #EA5504'
                        element.target.innerHTML = '获取验证码'
                        clearInterval(timer)
                    }
                }, 1000)
            }    

猜你喜欢

转载自www.cnblogs.com/helloearth/p/11767210.html
今日推荐