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

目录
  • 前言
  • 代码实现
  • 小结

前言

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

代码实现

主要逻辑

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 验证码倒计时内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • vue发送验证码计时器防止刷新实现详解

    目录 基本实现效果 防止刷新 基本实现效果 按钮: <t-button @click="handleSend" :disabled="disable">{{text}}</t-button> data: text: '发送验证码', time: 10, timer: null, disable: false 点击发送: handleSend() { this.disable = true this.text = this.time + 's后

  • vue3发送验证码倒计时功能的实现(防止连点、封装复用)

    目录 一.实现思路 二.实现一个简单的验证码倒计时 三.优化 四.逻辑封装 补充 mobileRule 一.实现思路 倒计时 流程图 二.实现一个简单的验证码倒计时 //倒计时初始变量 const codeNum = ref(60); // 定时器id let clearId: number; // 发送验证码 const sendCode = async () => { // 防止下次点击 如果倒计时的时间不是60 就不执行下面逻辑 if (codeNum.value != 60) retur

  • node+vue前后端分离实现登录时使用图片验证码功能

    目录 后端代码 前端代码 获取验证码方法 登录验证方法 记录一下前端使用验证码登录的过程后端用的是node.js,关键模块是svg-captcha前端使用的是vue2最后的登录界面如下: 后端代码 先上代码,然后解释 const svgCaptcha = require('svg-captcha') exports.checkCode = (req, res) => { const img = svgCaptcha.create({ size: 4, ignoreChars: '0o1l', c

  • vue实现web前端登录页数字验证码

    本文实例为大家分享了vue实现web前端登录页数字验证码的具体代码,供大家参考,具体内容如下 1.创建code.js文件夹下面是js代码 function GVerify(options) {     console.log(); // 创建一个图形验证码对象,接收options对象为参数     this.con = document.getElementById(options)     this.options = { // 默认options参数值         id: '', //

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

    目录 前言 代码实现 小结 前言 倒计时的运用场景是需要经常用到的,但是根据业务的不同,好比手机验证码或者是邮箱验证码之类的,即使用户跳转到其它页面或者刷新,再次回到登录也,验证码的倒计时也得保持状态,大家参考逻辑即可,每个人的项目不同,这里提供大概的实现代码. 代码实现 主要逻辑 const state = reactive({ labelPosition: 'top', formData: { phone: '', code: '', }, // 倒计时 countDownTime: 60,

  • IOS实现验证码倒计时功能(一)

    验证码倒计时按钮的应用是非常普遍的,该Blog就和你一起来写一个IDCountDownButton来实现验证码倒计时的效果.你可以想使用普通的UIButton类型按钮一样,只需要设置其倒计时时长(若未设置,默认为60秒),就可以轻松的实现点击countDownButton开始倒计时,倒计时结束方可重新点击. 一.实现效果 如图 二.实现思路 1.自定义一个IDCountDownButton,重写 beginTrackingWithTouch:withEvent: 拦截button的点击事件,根据

  • swift 3.0 实现短信验证码倒计时功能

    下面一段代码给大家分享swift 3.0 实现短信验证码倒计时功能,具体实例代码如下所示: class TCCountDown { private var countdownTimer: Timer? var codeBtn = UIButton() private var remainingSeconds: Int = 0 { willSet { codeBtn.setTitle("重新获取\(newValue)秒", for: .normal) if newValue <=

  • JS短信验证码倒计时功能的实现(没有验证码,只有倒计时)

    1.功能描述 当用户想要获取验证码时,就点击 免费获取验证码 ,然后开始倒计时,倒计时期间按钮文字为剩余时间x秒,且不可按状态,倒计时结束后,按钮更改为点击重新发送. 2.分析 必须用到定时器.按钮点击后,在定时器内做出判断.倒计时60秒,到0结束. 3.代码实现: 重点介绍:定时器在进行下一次倒计时之前,一定要清除一下,这样的话保证下一次定时器倒计时是正常的. <!DOCTYPE html> <html> <head> <meta charset="U

  • Android实现获取验证码倒计时功能

    本文实例为大家分享了android获取验证码倒计时功能的具体代码,供大家参考,具体内容如下 获取验证码倒计时在现在的App中非常常见,他主要的功能点就是给TextView设置一个点击事件,但是当点击后或出现倒计时,在倒计时的时候点击是触发不了点击事件的. 等倒计时结束显示重新获取验证码的时候可以重新触发点击事件: 在真实的项目中一般都是设置一分钟,咱们这里就不设置那么长了,设置10秒: 首先说下我这个demo非常简单,工具类不用管,直接复制到项目中,只需要两步两行代码即可: 第一步:初始化工具类

  • android实现一个图片验证码倒计时功能

    1.如图所示,要实现一个验证码的倒计时的效果          2.实现 图中获取验证码那块是一个button按钮 关键部分,声明一个TimeCount,继承自CountDownTimer /*验证码倒计时*/ private class TimeCount extends CountDownTimer{ /** * @param millisInFuture 总时间长度(毫秒) * @param countDownInterval 时间间隔(毫秒),每经过一次时间间隔都会调用onTick方法

  • Android 简单封装获取验证码倒计时功能

    效果如下图所示: 如图所示的效果相信大家都不陌生,我们可以使用很多种方法去实现此效果,这里自己采用 CountDownTimer 定时器简单封装下此效果,方便我们随时调用. 首页先在 attrs.xml 中定义下所需的几个属性: <resources> <declare-styleable name="CountDownButton"> <attr name="millisinfuture" format="integer&q

  • 微信小程序项目实践之验证码倒计时功能

    效果如下:点击发送验证码按钮,按钮背景变色,不可点击,显示倒计时文字 首先js文件的data里面 声明一个变量用于表示当前是否可以点击,codeIsCanClick = true,  默认是可以点击的 写下界面代码: wxml文件中 <view class='centerRow'> <view class='inputLabel'>动态码:</view> <input class='inputStyle' style="flex:1 " bin

  • JS 实现获取验证码 倒计时功能

    setInterval 一个定时器搞定 <style> button{ background: #45BCF9; color: #fff; padding: 4px 10px; border: none; outline: none; cursor: pointer; } button:hover{ background: #00a8fe; } button.disabled{ background: #000; cursor: auto; } button.disabled:hover{ b

随机推荐