快捷導(dǎo)航

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

更新時(shí)間：2022年08月12日 10:05:43 作者：故藍(lán)尋

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

前言

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

代碼實(shí)現(xiàn)

主要邏輯

const state = reactive({
  labelPosition: 'top',
  formData: {
    phone: '',
    code: '',
  },

  // 倒計(jì)時(shí)
  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="手機(jī)號(hào)">
            <el-input v-model="formData.phone" placeholder="手機(jī)號(hào)">
              <template #append>
                <div class="get-code">
                  <span v-if="!countDownIng" @click="countDown">獲取驗(yàn)證碼</span>
                  <span v-if="countDownIng">倒計(jì)時(shí){{ countDownTime }}s</span>
                </div>
              </template>
            </el-input>
          </el-form-item>

          <el-form-item label="驗(yàn)證碼">
            <el-input v-model="formData.code" placeholder="驗(yàn)證碼"/>
          </el-form-item>

          <el-form-item>
            <span class="sub-btn to-login" style="width: 100%">注冊(cè)</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: '',
      },

      // 倒計(jì)時(shí)
      countDownTime: 60,
      timer: null,
      countDownIng: false,
    })

    /**
     * 作者：故藍(lán)尋
     * 時(shí)間：2022/08/05 17:13:37
     * 功能：獲取驗(yàn)證碼 事件
     */
    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>

小結(jié)

大致邏輯是這樣，大家根據(jù)具體的需要來完善，vue2也適用
這是vue3，但是使用的js語(yǔ)法，使用的是ts語(yǔ)法的，也是一樣的邏輯

到此這篇關(guān)于Vue3 驗(yàn)證碼倒計(jì)時(shí)實(shí)現(xiàn)(刷新保持狀態(tài))的文章就介紹到這了,更多相關(guān)Vue3 驗(yàn)證碼倒計(jì)時(shí)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: