前言
倒计时的运用场景是需要经常用到的，但是根据业务的不同，好比手机验证码或者是邮箱验证码之类的，即使用户跳转到其它页面或者刷新，再次回到登录也，验证码的倒计时也得保持状态，大家参考逻辑即可，每个人的项目不同，这里提供大概的实现代码。
代码实现
主要逻辑
const state = reactive({
labelPosition: 'top',
formData: {
phone: '',
code: '',
},
// 倒计时
countDownTime: 60,
timer: null,
countDownIng: false,
})
const countDown = () => {
let startTime = localStorage.getItem('startTimeLogin');
let nowTime = new Date().getTime();
if (startTime) {
let surplus = 60 - parseInt((nowTime - startTime) / 1000, 10);
state.countDownTime = surplus <= 0 ? 0 : surplus;
} else {
state.countDownTime = 60;
localStorage.setItem('startTimeLogin', nowTime);
}
state.timer = setInterval(() => {
state.countDownTime--;
state.getCodeDisabled = true;
state.countDownIng = true;
if (state.countDownTime <= 0) {
localStorage.removeItem('startTimeLogin');
clearInterval(state.timer);
state.countDownTime = 60;
state.countDownIng = false;
}
}, 1000)
}
onMounted 方法
onMounted(() => {
let sendEndTime = localStorage.getItem('startTimeLogin');
if (sendEndTime) {
state.countDownIng = true;
countDown()
}
})
完整代码
<template>
<main class="content">
<div class="mi-card login-card">
<div class="reg-form">
<el-form :label-position="labelPosition" label-width="auto" :model="formData">
<el-form-item label="手机号">
<el-input v-model="formData.phone" placeholder="手机号">
<template #append>
<div class="get-code">
<span v-if="!countDownIng" @click="countDown">获取验证码</span>
<span v-if="countDownIng">倒计时{{ countDownTime }}s</span>
</div>
</template>
</el-input>
</el-form-item>
<el-form-item label="验证码">
<el-input v-model="formData.code" placeholder="验证码"/>
</el-form-item>
<el-form-item>
<span class="sub-btn to-login" style="width: 100%">注册</span>
</el-form-item>
</el-form>
</main>
</template>
<script>
import {defineComponent, reactive, toRefs, onMounted} from 'vue'
export default defineComponent({
name: "LoginPage",
setup() {
const state = reactive({
labelPosition: 'top',
formData: {
phone: '',
code: '',
},
// 倒计时
countDownTime: 60,
timer: null,
countDownIng: false,
})
/**
* 作者：故蓝寻
* 时间：2022/08/05 17:13:37
* 功能：获取验证码 事件
*/
const countDown = () => {
let startTime = localStorage.getItem('startTimeLogin');
let nowTime = new Date().getTime();
if (startTime) {
let surplus = 60 - parseInt((nowTime - startTime) / 1000, 10);
state.countDownTime = surplus <= 0 ? 0 : surplus;
} else {
state.countDownTime = 60;
localStorage.setItem('startTimeLogin', nowTime);
}
state.timer = setInterval(() => {
state.countDownTime--;
state.getCodeDisabled = true;
state.countDownIng = true;
if (state.countDownTime <= 0) {
localStorage.removeItem('startTimeLogin');
clearInterval(state.timer);
state.countDownTime = 60;
state.countDownIng = false;
}
}, 1000)
}
onMounted(() => {
let sendEndTime = localStorage.getItem('startTimeLogin');
if (sendEndTime) {
state.countDownIng = true;
countDown()
}
})
return {
...toRefs(state),
countDown
}
}
})
</script>
<style scoped lang="scss">
</style>
小结
- 大致逻辑是这样，大家根据具体的需要来完善，vue2也适用
- 这是vue3，但是使用的js语法，使用的是ts语法的，也是一样的逻辑
到此这篇关于Vue3 验证码倒计时实现(刷新保持状态)的文章就介绍到这了,更多相关Vue3 验证码倒计时内容请搜索Devmax以前的文章或继续浏览下面的相关文章希望大家以后多多支持Devmax！