快捷導(dǎo)航

Vue3?實現(xiàn)驗證碼倒計時功能(刷新保持狀態(tài))

更新時間：2022年08月12日 10:05:43 作者：故藍尋

倒計時的運用場景是需要經(jīng)常用到的，但是根據(jù)業(yè)務(wù)的不同，好比手機驗證碼或者是郵箱驗證碼之類的，即使用戶跳轉(zhuǎn)到其它頁面或者刷新，再次回到登錄也，驗證碼的倒計時也得保持狀態(tài),下面通過本文給大家分享Vue3?驗證碼倒計時功能實現(xiàn)，感興趣的朋友一起看看吧

前言

倒計時的運用場景是需要經(jīng)常用到的，但是根據(jù)業(yè)務(wù)的不同，好比手機驗證碼或者是郵箱驗證碼之類的，即使用戶跳轉(zhuǎn)到其它頁面或者刷新，再次回到登錄也，驗證碼的倒計時也得保持狀態(tài)，大家參考邏輯即可，每個人的項目不同，這里提供大概的實現(xiàn)代碼。

代碼實現(xiàn)

主要邏輯

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>