vue 实现发送短信验证码后按钮的倒计时及禁用功能
参考网上的写过一个,但是第二次发送验证码倒计时会加快,调整后可用。话不多说,直接上代码。页面:<div class="iptbx round"><div class="txt"><input type="text" class="ipttype" name="username" v-model="model.username" place...
·
参考网上的写过一个,但是第二次发送验证码倒计时会加快,调整后可用。话不多说,直接上代码。
页面:
<div class="iptbx round">
<div class="txt"><input type="text" class="ipttype" name="username" v-model="model.username" placeholder="手机号" @keydown.enter="login"></div>
</div>
<div class="check">
// 短信验证码输入框
<div class="msg round">
<div class="txt">
<input type="text" class="ipttype" name="code" v-model="code" placeholder="短信验证码" @keydown.enter="login">
</div>
</div>
// 发送验证码按钮--可点击的
<div class="btn round" @click="sendSms()" v-if="!isDisabled">{{content}}</div>
// 发送验证码按钮--不可点击的
<div class="btn round wait" v-if="isDisabled">{{content}}</div>
</div>
js:
data () {
return {
isDisabled: false, //控制按钮是否可以点击(false:可以点击,true:不可点击)
content: '获取短信验证码', // 发送验证码按钮的初始显示文字
timer: null,
count: '',
model: {},
}
},
methods: {
// 发送验证码
sendSms () {
let vm = this
// 校验手机号
if (!vm.model.username || vm.model.username == '') {
vm.$layer.msg('请输入手机号')
return
}
if (!(/^1[34578]\d{9}$/.test(vm.model.username))) {
vm.$layer.msg('请输入正确的手机号')
return
}
// 请求后台发送验证码至手机(vm.model内存有username字段为用户手机号,下述方法是自己项目封装的api请求(import引入的,没在此代码块显示),可根据自己实际请求方式修改)
getVerifyCode(vm.model).then((res) => {
vm.isDisabled = false
})
// 控制倒计时及按钮是否可以点击
const TIME_COUNT = 60
vm.count = TIME_COUNT
vm.timer = window.setInterval(() => {
if (vm.count > 0 && vm.count <= TIME_COUNT){
// 倒计时时不可点击
vm.isDisabled = true
// 计时秒数
vm.count--
// 更新按钮的文字内容
vm.content = vm.count + 's后重新获取'
} else {
// 倒计时完,可点击
vm.isDisabled = false
// 更新按钮文字内容
vm.content = '获取短信验证码'
// 清空定时器!!!
clearInterval(vm.timer)
vm.timer = null
}
}, 1000)
}
}
}
更多推荐
所有评论(0)