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

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

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

前言

倒計時的運用場景是需要經常用到的，但是根據(jù)業(yè)務的不同，好比手機驗證碼或者是郵箱驗證碼之類的，即使用戶跳轉到其它頁面或者刷新，再次回到登錄也，驗證碼的倒計時也得保持狀態(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>

小結

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

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

您可能感興趣的文章:

VUE中的export default和export使用方法解析
export default和export都能導出一個模塊里面的常量，函數(shù)，文件，模塊等，在其它文件或模塊中通過import來導入常量，函數(shù)，文件或模塊。但是，在一個文件或模塊中export,import可以有多個，export default卻只能有一個。
2022-12-12
詳解vue之自行實現(xiàn)派發(fā)與廣播(dispatch與broadcast)
這篇文章主要介紹了詳解vue之自行實現(xiàn)派發(fā)與廣播(dispatch與broadcast)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2021-01-01
vue實現(xiàn)井字棋游戲
這篇文章主要為大家詳細介紹了vue實現(xiàn)井字棋游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-09-09
解決betterScroll在vue中存在圖片時,出現(xiàn)拉不動的問題
今天小編就為大家分享一篇解決betterScroll在vue中存在圖片時,出現(xiàn)拉不動的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
uniapp和vue組件之間的傳值(父子傳值,兄弟傳值,跨級傳值,vuex)
這篇文章主要介紹了uniapp和vue組件之間的傳值(父子傳值,兄弟傳值,跨級傳值,vuex)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-05-05
vue動態(tài)綁定class的幾種常用方式小結
這篇文章主要介紹了vue動態(tài)綁定class的幾種常用方式,結合實例形式總結分析了vue.js常見的對象方法、數(shù)組方法進行class動態(tài)綁定相關操作技巧,需要的朋友可以參考下
2019-05-05
Tree-Shaking?機制快速掌握
這篇文章主要為大家介紹了Tree-Shaking?機制的快速掌握教程，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-02-02
Vue3定義組件的四種方式
Vue 作為一款流行的前端框架,提供了多種方式來定義組件,包括單文件組件、渲染函數(shù)、、JSX/TSX 以及函數(shù)式組件、不同的方式適用于不同的場景,本文將對這四種方式進行詳細對比,幫助你找到最適合自己項目的方案,需要的朋友可以參考下
2025-03-03
vue中table多選/單選行,獲取其數(shù)據(jù)方式
這篇文章主要介紹了vue中table多選/單選行,獲取其數(shù)據(jù)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-07-07
如何用Vite構建工具快速創(chuàng)建Vue項目
Vite是一個web開發(fā)構建工具,由于其原生?ES?模塊導入方法,它允許快速提供代碼,下面這篇文章主要給大家介紹了關于如何用Vite構建工具快速創(chuàng)建Vue項目的相關資料,需要的朋友可以參考下
2022-05-05