Vue + Vant实现点击发送验证码倒计时的功能
完成效果如上图所示,这里使用了Vant里面的输入框组件来完成前端的界面,用Vue来实现点击发送验证码后倒计时的功能。
需求分析
- 点击发送验证码按钮,出现(60秒)后重新发送
- 倒计时结束,按钮内容重置为发送验证码
- 手机号未填写,弹出请输入手机号的错误提示
- 在点击发送验证码按钮后,如果手机号改变,按钮重置
前端界面搭建
使用vant的输入框组件来完成界面的搭建,新建一个Send.vue文件,绘制前端页面。内容如下:
点击发送验证码
现在写完了界面,功能尚未编写,下面开始给发送验证码的按钮添加功能。
重写组件绑定功能
给按钮添加@click属性,添加sendSmsCode函数;
绑定disabled属性,点击发送验证码按钮后,让其按钮禁用,等倒数完后再恢复点击的功能;
“点击发送验证码”文本添加双向绑定,在点击后将文本替换为“(60秒)后重新发送”,倒计时结束后重新恢复文本为“点击发送验证码”。
{{ sendBtnText }}
......
// data() 里面添加下面几个字段
data () {
return {
...
// 是否已经发送了验证码
isSmsSend: false,
// 文本
sendBtnText: '点击发送验证码',
// 计时器对象
timer: null,
// 倒数60秒
counter: 60
}
}
下面我们再编写sendSmsCode函数。
编写sendSmsCode函数
这里点击发送验证码按钮,先判断下手机号是否已经输入和是否符合规则,不符合判断条件,则通知用户相应的错误。
编写countDown倒计时函数
倒计时的功能使用了window里面的setInterval()方法和clearInterval()方法。setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式;clearInterval() 方法可取消由 setInterval() 函数设定的定时执行操作。
相关具体讲解可见菜鸟教程:setInterval()方法、clearInterval()方法
这样倒计时的功能基本完成,但存在一个问题,倒计时完成后,按钮没有重置,所以还得写一个重置倒计时的函数。
编写重置函数
在倒计时结束时,重置计时器对象,重置按钮变可用,重置文本。
监听手机号输入框事件
最后,在第一次点击按钮倒计时开始后,如果改变手机号的话,得重置该按钮,这样在输入框中绑定onPhoneChange函数,让其监听后调用充值方法,这里vant组件中,有个input属性就是当输入框内容改变时触发事件,所以,我们再次修改如下:
@input="onPhoneChange"
/>
然后在methods中完善该方法:
这样,功能就完成了,下面贴上所有代码以供参考
全部代码
{{ sendBtnText }}
如需转载,请加上本文的链接并标明出处
一条爱吃屎的狗:https://www.qnmlgb.top