最近在做一个Vue项目，前端通过手机号、验证码登录，获取验证码按钮需要设置60s倒计时（点击一次后，一分钟内不得再次点击）。先看一下效果图：
输入正确格式的手机号码后，“获取验证码”按钮方可点击；点击“获取验证码”后，按钮进入60s倒计时，效果图如下：
效果图已经有了，接下来就上代码吧！
- html
|
1
|
<el-button @click="getCode()" :class="{'disabled-style':getCodeBtnDisable}" :disabled="getCodeBtnDisable">{{codeBtnWord}}</el-button> |
- 数据data
|
1
2
3
4
5
6
7
8
9
10
|
data() { return { loginForm: { phoneNumber: '', verificationCode: '', }, codeBtnWord: '获取验证码', // 获取验证码按钮文字 waitTime:61, // 获取验证码按钮失效时间 }} |
- 计算属性computed
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
computed: { // 用于校验手机号码格式是否正确 phoneNumberStyle(){ let reg = /^1[3456789]\d{9}$/ if(!reg.test(this.loginForm.phoneNumber)){ return false } return true }, // 控制获取验证码按钮是否可点击 getCodeBtnDisable:{ get(){ if(this.waitTime == 61){ if(this.loginForm.phoneNumber){ return false } return true } return true }, // 注意：因为计算属性本身没有set方法，不支持在方法中进行修改，而下面我要进行这个操作，所以需要手动添加 set(){} }} |
关于上面给计算属性添加set方法，可以参照//www.zzvips.com/article/202496.htm
- css设置不可点击时置灰
|
1
2
3
4
|
.el-button.disabled-style { background-color: #EEEEEE; color: #CCCCCC;} |
- mothods中添加获取验证码方法
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
getCode(){ if(this.phoneNumberStyle){ let params = {} params.phone = this.loginForm.phoneNumber // 调用获取短信验证码接口 axios.post('/sendMessage',params).then(res=>{ res = res.data if(res.status==200) { this.$message({ message: '验证码已发送，请稍候...', type: 'success', center:true }) } }) // 因为下面用到了定时器，需要保存this指向 let that = this that.waitTime-- that.getCodeBtnDisable = true this.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 = false that.waitTime = 61 } },1000) }} |
通过上面的代码，就可以实现了，如有错误，敬请指正！
以上就是Vue实现手机号、验证码登录（60s禁用倒计时）的详细内容，更多关于vue 手机号验证码登录的资料请关注服务器之家其它相关文章！
原文链接：https://www.cnblogs.com/belongs-to-qinghua/p/12071789.html
