Vue3 实现验证码倒计时功能(刷新保持状态)

Psyche ·

更新时间:2024-09-20

· 1935 次阅读

前言

代码实现

小结

前言

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

代码实现

主要逻辑

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

到此这篇关于Vue3 验证码倒计时实现(刷新保持状态)的文章就介绍到这了,更多相关Vue3 验证码倒计时内容请搜索软件开发网以前的文章或继续浏览下面的相关文章希望大家以后多多支持软件开发网！

VUE 倒计时验证码

1024 个赞