vue写短信验证时实现60s倒计时功能
已进入该页面就发送了验证码,同时实现倒计时功能:
60s后效果:
<!-- 找回密码 -->
<template>
<div id="stepsTwo" class="clearfix">
<div class="steps-main clearfix">
<el-form
:model="ruleForm"
status-icon
ref="ruleForm"
label-width="0px"
class="demo-ruleForm ruleForm"
:rules="rules"
>
<el-form-item prop="verifyPhone">
<a class="grid-content">验证码</a>
<input
v-model.trim="ruleForm.verifyPhone"
type="text"
placeholder="输入手机验证码"
class="form-input"
clearable
/>
<div
@click="getCode(ruleForm)"
v-bind:class="{ active: isActive }"
class="verifyPhone-button"
>
<span v-show="isActive">重新获取</span>
<span v-show="!isActive">{{count}}s</span>
</div>
</el-form-item>
</el-form>
</div>
</div>
</template>
<script>
const TIME_COUNT = 60;
export default {
name: "stepsTwo",
data() {
return {
isActive: false,
count: 0,
timer: null,
ruleForm: {
verifyPhone: "",
newPwd: "",
verifyPwd: ""
}
};
},
created() {
this.getCode();//一进入这个页面就倒计时,故需要在这里挂载
},
methods: {
getCode(ruleForm) {
if (!this.timer) {
this.count = TIME_COUNT;
this.isActive = false;
this.timer = setInterval(() => {
if (this.count > 0 && this.count <= TIME_COUNT) {
this.count--;
} else {
this.isActive = true;
clearInterval(this.timer);
this.timer = null;
}
}, 1000);
}
},
}
};
</script>
<style lang='less' scoped>
.verifyPhone-button {
border: .0625rem solid #ccc;
background: #f7f7f7;
color: #999;
border-radius: .3125rem;
width: 5.5625rem;
height: 2.375rem;
line-height: 2.375rem;
margin-top: .625rem;
text-align: center;
font-size: 1rem;
}
.active {
border: .0625rem solid #3980ea;
background: #fff;
color: #3980ea;
}
</style>