这篇文章主要介绍了Vue实现手机号验证码登录（60s禁用倒计时），帮助大家更好的理解和使用vue，具有很好的参考价值，感兴趣的朋友可以了解下
最近做了个vue项目，前端通过手机号验证码的方式登录，获取验证码的按钮需要倒计时，点击一次之后，60秒内不能再次点击。先看效果图：
输入正确格式的手机号码后，“获取验证码” 按钮方可点击；点击“获取验证码”后，按钮进入60s倒计时，效果图如下：
效果图有了，接下来就是代码了：
<el-button @click="getCode()" :disabled="getCodeBtnDisable">{{codeBtnWord}}</el-button>
data返回数据：
data() {return {loginForm: {phoneNumber: '',verificationCode: '',},codeBtnWord: '获取验证码', // 获取验证码按钮文字waitTime:60, // 获取验证码按钮失效时间getCodeBtnDisable: false,}}
校验手机号是否正确
computed: {// 用于校验手机号码格式是否正确phoneNumberStyle(){let reg = /^1[3456789]\d{9}$/if(!reg.test(this.loginForm.phoneNumber)){return false}return true}}
mothods中添加获取验证码方法
async sendCode () {try {let params = {}params.phone = this.loginForm.phoneNumberlet data = await axios.post('/sendMessage',params)this.$message.success('验证码发送成功')let that = thisthat.waitTime--that.getCodeBtnDisable = truethis.codeBtnWord = `${this.waitTime}s 后重新发送`let timer = setInterval(function () {if (that.waitTime > 1) {that.waitTime--that.codeBtnWord = `${that.waitTime}s 后重新发送`} else {clearInterval(timer)that.codeBtnWord = '获取验证码'that.getCodeBtnDisable = falsethat.waitTime = 60}}, 1000)} catch (res) {console.log(res)}},
以上就是Vue实现手机号验证码登录（60s禁用倒计时）的详细内容，如有错误请指出！
