SoFunction
Updated on 2025-04-04

Vue3 implements the verification code countdown function (refresh and keep state)

Preface

The use of countdown is often used, but depending on the business, such as mobile phone verification codes or email verification codes, even if the user jumps to other pages or refreshes and returns to log in again, the countdown of the verification code must be kept in the state. Please refer to the logic. Everyone has different projects. Here is a general implementation code.

Code implementation

Main logic

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

  // Countdown  countDownTime: 60,
  timer: null,
  countDownIng: false,
})

const countDown = () => {

  let startTime = ('startTimeLogin');
  let nowTime = new Date().getTime();
  if (startTime) {
    let surplus = 60 - parseInt((nowTime - startTime) / 1000, 10);
     = surplus <= 0 ? 0 : surplus;
  } else {
     = 60;
    ('startTimeLogin', nowTime);
  }

   = setInterval(() => {
    --;
     = true;
     = true;
    if ( <= 0) {
      ('startTimeLogin');
      clearInterval();
       = 60;
       = false;
    }
  }, 1000)
}

onMounted method

onMounted(() => {
  let sendEndTime = ('startTimeLogin');
  if (sendEndTime) {
     = true;
    countDown()
  }
})

Complete code

<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="Phone number">
            <el-input v-model="" placeholder="Phone number">
              <template #append>
                <div class="get-code">
                  <span v-if="!countDownIng" @click="countDown">Get the verification code</span>
                  <span v-if="countDownIng">Countdown{{ countDownTime }}s</span>
                </div>
              </template>
            </el-input>
          </el-form-item>

          <el-form-item label="Verification Code">
            <el-input v-model="" placeholder="Verification Code"/>
          </el-form-item>

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

      // Countdown      countDownTime: 60,
      timer: null,
      countDownIng: false,
    })

    /**
      * Author: Au Lan Xun
      * Time: 2022/08/05 17:13:37
      * Function: Get verification code Event
      */
    const countDown = () => {

      let startTime = ('startTimeLogin');
      let nowTime = new Date().getTime();
      if (startTime) {
        let surplus = 60 - parseInt((nowTime - startTime) / 1000, 10);
         = surplus <= 0 ? 0 : surplus;
      } else {
         = 60;
        ('startTimeLogin', nowTime);
      }

       = setInterval(() => {
        --;
         = true;
         = true;
        if ( <= 0) {
          ('startTimeLogin');
          clearInterval();
           = 60;
           = false;
        }
      }, 1000)
    }

    onMounted(() => {
      let sendEndTime = ('startTimeLogin');
      if (sendEndTime) {
         = true;
        countDown()
      }
    })

    return {
      ...toRefs(state),
      countDown
    }
  }
})
</script>

<style scoped lang="scss">

</style>

summary

  • The general logic is this, everyone will improve it according to specific needs, and vue2 is also applicable
  • This is vue3, but the js syntax used, the ts syntax used, and the same logic

This is the article about the implementation of Vue3 verification code countdown (refresh and keep state). For more related Vue3 verification code countdown content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!