当前位置: 首页 > Web前端 > HTML5

vue+vant实现的获取验证码的倒计时按钮

时间:2023-04-05 11:16:02 HTML5

一个很简单常用的逻辑就是获取手机验证码和登录时的倒计时按钮逻辑,我用的是手机ui插件vant。vant的介绍方式就不赘述了。具体可以参考vant官网https://vant-contrib.gitee.io...直接输入代码=6&&showCountdown==true'ref="smsCode"slot="button"size="mini">=6"@click="getSmsCode"slot="button"size="mini">获取验证码获取验证码其实逻辑不是很难。我在这里使用了三个按钮逻辑。逻辑是,如果一开始手机输入框的长度小于6位,则禁用获取验证码的按钮。长度大于等于6,如果要获取验证码,可以点击它在数据中显示倒计时倒计时按钮data(){return{phone:'',//电话号码time:60*1000,//倒计时时间为60秒*10000showCountdown:false//是否显示倒计时}}methodsMediummethods:{getSmsCode(){this.showCountdown=true//这里只是简单展示倒计时逻辑获取验证码需要具体接口},countDownFinish(){//倒计时结束后的方法this。showCountdown=false//隐藏倒计时}}