Vue3 实现验证码倒计时功能(刷新保持状态)_vue.js_

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(() => { let sendEndTime = localStorage.getItem('startTimeLogin'); if (sendEndTime) { state.countDownIng = true; countDown() } })