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后重新发送'
      this.timer = setInterval(() => {
        if (this.time > 0) {
          this.time--
          this.text = this.time + 's后重新发送'
        } else {
          clearInterval(this.timer)
          this.time = 10
          this.disable = false
          this.text = '重新发送'
        }
      }, 1000)
    }

防止刷新

    handleSend() {
      this.disable = true
      this.text = this.time + 's后重新发送'
      this.timer = setInterval(() => {
        if (this.time > 0) {
          this.time--
          this.text = this.time + 's后重新发送'
          localStorage.setItem('time', this.time) // 注意这行
        } else {
          clearInterval(this.timer)
          this.time = 10
          this.disable = false
          this.text = '重新发送'
        }
      }, 1000)
    }
  created() {
    const time = localStorage.getItem('time')
    if (time && time > 0) {
      this.text = time + 's后重新发送'
      this.time = time
      this.handleSend()
    }
  }

以上就是vue发送验证码计时器防止刷新实现详解的详细内容,更多关于vue发送验证码计时器防止刷新的资料请关注我们其它相关文章!

(0)

相关推荐

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

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

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

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

  • 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

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

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

  • 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后

  • antd Vue实现Login登录页面布局案例详解 附带验证码验证功能

    效果 Login页面 <!-- * @Author: Jackie * @Date: 2022-05-07 14:34:06 * @LastEditTime: 2022-05-09 15:57:44 * @LastEditors: Jackie * @Description: 登录页 用户名-密码-验证码登录方式 * @FilePath: /vue-admin-template/src/views/Login.vue * @version: --> <template> <d

  • SpringBoot实现滑块验证码验证登陆校验功能详解

    目录 前言 一.实现效果 二.实现思路 三.实现步骤 1. 后端 java 代码 1.1 新建一个拼图验证码类 1.2 新建一个拼图验证码工具类 1.3 新建一个 service 类 1.4 新建一个 controller 类 1.5 登录接口 2. 前端 vue 代码 2.1 新建一个 sliderVerify 组件 2.2 在登录页使用滑块组件 前言 验证码一直是各类网站登录和注册的一种校验方式,是用来防止有人恶意使用脚本批量进行操作从而设置的一种安全保护方式.随着近几年技术的发展,人们对于

  • vue bus全局事件中心简单Demo详解

    1.vue-cli搭建好项目之后,使用npm安装vue-bus  npm install vue-bus 2.在入口文件main.js中全局注册 import Vue from 'vue'; import VueBus from 'vue-bus'; Vue.use(VueBus); 3.传递数据: this.$bus.emit("eventName",data) 4.接收数据: this.$bus.on("eventName",data) 5.注意事项 this的

  • Vue项目全局配置微信分享思路详解

    这个项目为移动端项目,主要用于接入公众号服务.项目采用两种登录方式,微信授权登录以及账号密码登录.对于移动端项目而言,为了便于项目扩展以及提供开发热更新速度,项目分为不同的模块,每个模块是一个单页面应用.页面分为两种,一种是需要用户登录之后才能浏览,另一种是用户无需登录即可浏览.无论哪一种,均配置微信分享. 使用的技术 1.使用vue作为框架 2.使用vux作为UI组件库 全局配置微信分享思路 1.区分一般和特殊,一般情况,全局配置默认分享文案:特殊情况分两种,一种是分享内容不需要异步获取,则在

  • vue全局使用axios的方法实例详解

    在vue项目开发中,我们使用axios进行ajax请求,很多人一开始使用axios的方式,会当成vue-resoure的使用方式来用,即在主入口文件引入import VueResource from 'vue-resource'之后,直接使用Vue.use(VueResource)之后即可将该插件全局引用了,所以axios这样使用的时候就报错了,很懵逼. 仔细看看文档,就知道axios 是一个基于 promise 的 HTTP 库,axios并没有install 方法,所以是不能使用vue.us

  • 使用Vue开发动态刷新Echarts组件的教程详解

    需求背景:dashboard作为目前企业中后台产品的"门面",如何更加实时.高效.炫酷的对统计数据进行展示,是值得前端开发工程师和UI设计师共同思考的一个问题.今天就从0开始,封装一个动态渲染数据的Echarts折线图组件,抛砖引玉,一起来思考更多有意思的组件. 准备工作 项目结构搭建 因为生产需要(其实是懒),所以本教程使用了 ==vue-cli==进行了项目的基础结构搭建. npm install -g vue-cli vue init webpack vue-charts cd

  • vue组件之间的数据传递方法详解

    (1)props属性: 在父组件中,可以通过子组件标签属性的形式将数据或者函数传给子组件,子组件通过props去读取父组件传过来的数据 用法 父组件传数据给子组件: 一般的属性值都是用来给子组件展示的 子组件传数据给父组件 属性值为函数类型的,一般是用来子组件向父组件传递数据,子组件通过调用父组件传过来的函数,可以修改父组件的状态数据 缺点: 隔层组件间传递: 必须逐层传递(麻烦) 兄弟组件间: 必须借助父组件(麻烦) 注意: //子组件获取父组件传过来的值 props: { obj: {//o

  • Vue.js原理分析之nextTick实现详解

    前言 tips:第一次发技术文章,篇幅比较简短,主要采取文字和关键代码表现的形式,希望帮助到大家.(若有不正确还请多多指正) nextTick作用和用法 用法:nextTick接收一个回调函数作为参数,它的作用是将回调延迟到下一次DOM更新之后执行,如果没有提供回调函数参数且在支持Promise的环境中,nextTick将返回一个Promise. 适用场景:开发过程中,开发者需要在更新完数据之后,需要对新DOM做一些操作,其实我们当时无法对新DOM进行操作,因为这时候还没有重新渲染,这时候nex

  • Vue.js实现watch属性的示例详解

    目录 1.写在前面 2.watch的实现原理 3.立即执行的watch与回调执行时机 立即执行的回调函数 回调函数的执行时机 4.过期的副作用函数和cleanup 5.写在最后 1.写在前面 在上篇文章中,我们讨论了compted的实现原理,就是利用effect和options参数进行封装.同样的,watch也是基于此进行封装的,当然watch还可以传递第三参数去清理过期的副作用函数.不仅可以利用副作用函数的调度性,去实现回调函数的立即执行,也可以控制回调函数的执行时机. 2.watch的实现原

随机推荐