Vue 中实现验证码倒计时功能

公司项目中有根据手机号获取验证码的环节,倒计时的实现还是比较有趣的,记录一下。

实现效果

具体实现

1、HTML 部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<li>
<div>
<span>手机号</span>
</div>
<div>
<input type="text" class="m-edit-input" v-model="ustelphone">
</div>
</li>
<li>
<div>
<span>验证码</span>
</div>
<div>
<input type="text" class="m-edit-input-s" v-model="identifyingcode" maxlength="6">
<span class="m-get-code active" v-if="!getCode" @click="getInforcode">获取验证码</span>
<span class="m-get-code" v-if="getCode">{{ count }} 秒后再次获取</span>
</div>
</li>

2、JS 部分

1
2
3
4
5
6
7
8
data() {
return {
getCode: false, // 是否已获取验证码
ustelphone: '', // 手机号码
timer: null, // 倒计时
count: "" // 倒计时
}
}

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
// 获取验证码
getInforcode() {
if(!this.ustelphone){
Toast("请先输入手机号码");
return false;
}
// 倒计时60秒
const TIME_COUNT = 10;
if (!this.timer) {
this.count = TIME_COUNT;
this.getCode = true;
this.timer = setInterval(() => {
if (this.count > 0 && this.count <= TIME_COUNT) {
this.count --;
} else {
this.getCode = false;
clearInterval(this.timer);
this.timer = null;
}
}, 1000);
}
axios.get(api.get_inforcode + "?ustelphone=" + this.ustelphone).then(res => {
Toast(res.data.message);
});
}

3、CSS 部分

1
2
3
4
5
6
7
8
9
10
11
12
13
.m-get-code{
display: inline-block;
padding: 4px 15px;
border-radius: 10px;
background-color: #CCCCCC;
color: #fff;
box-shadow:0 3px 6px rgba(0,0,0,0.16);
font-size: 21px;
line-height: 40px;
&.active{
background-color: @mainColor;
}
}
以上

随笔标题:Vue 中实现验证码倒计时功能

随笔作者:刘先玉

发布时间:2018年08月19日 - 20:29:30

最后更新:2018年08月19日 - 20:29:30

原文链接:https://liuxianyu.cn/article/code-setInterval.html