vue写60秒验证码倒计时
需求:输入手机号码点击按钮获取验证码,按钮变灰色、60秒内禁止重复点击
CSS
.onclick{
background-color: #999 !important;
pointer-events: none;
cursor: default;
}
HTML
<div id="phone_code">
<div id="phone_box">
<input type="text" placeholder="请输入手机号码" v-model="phone_number">
<button class="layui-btn" @click="postCode(phone_number)" :class="{onclick:OnClick}">{{OnClickMsg}}</button>
</div>
<div class="code_box">
<input type="text" placeholder="请输入验证码" v-model="code_number">
</div>
</div>
JS
new Vue({
el: '#shop_box',
data(){
return{
phone_number:'',
code_number:'',
OnClick:false, //是否可以点击获取验证码
OnClickMsg:'获取验证码', //验证码按钮文字
time: 60, //倒计时时间
}
},
mounted () {
},
methods: {
//获取验证码
postCode:function(){
let _this =this;
var regMoblie = /^1[345678]\d{9}$/;
if(!regMoblie.test(_this.phone_number)) {
layer.msg('该手机号格式错误');
return;
}else {
axios.post('/index/shop/getcode',{
mobile: _this.phone_number,
}).then(function (response) {
_this.OnClick = true; //禁止点击获取验证码
_this.countdown(); //倒计时
}).catch(function () { // 请求失败处理
});
}
},
//60s倒计时
countdown:function () {
let _this = this;
if(_this.time == 0 ) {
_this.OnClickMsg = '获取验证码';
_this.time = 60;
_this.OnClick = false;
return ;
}
setTimeout(function () {
_this.countdown()
},1000);
_this.time--;
_this.OnClickMsg = _this.time + "s重新获取";
},
}
});