Vue3 验证码倒计时实现（刷新保持状态）

前言

倒计时的运用场景是需要经常用到的，但是根据业务的不同，好比手机验证码或者是邮箱验证码之类的，即使用户跳转到其它页面或者刷新，再次回到登录也，验证码的倒计时也得保持状态，大家参考逻辑即可，每个人的项目不同，这里提供大概的实现代码。

代码实现

主要逻辑

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语法的，也是一样的逻辑