登录中获取验证码的节流

news2024/11/26 18:25:06

一. 验证码框

<el-input placeholder="请输入验证码" prefix-icon="el-icon-lock" v-model="ruleForm.code">
    <el-button slot="suffix" :disabled="disabled" type="text" size="mini" @click="checkbtn"> {{ text }}
    </el-button>
</el-input>

二.点击事件

data 中声明

text: "获取验证码",
disabled: false,

methods 事件

checkbtn() {
    this.disabled = true
    let sum = 60
    this.text = sum + 's后在尝试'
    let set
    set = setInterval(() => {
        sum--
        this.text = sum + 's后在尝试'
        if (sum == 0){
            this.disabled = false
            this.text = "获取验证码"
            clearInterval(set)
        }
    }, 1000)
},

是不是很简单!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1090107.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

树莓派玩转openwrt软路由:5.OpenWrt防火墙配置及SSH连接

1、SSH配置 打开System -> Administration&#xff0c;打开SSH Access将Interface配置成unspecified。 如果选中其他的接口表示仅在给定接口上侦听&#xff0c;如果未指定&#xff0c;则在所有接口上侦听。在未指定下&#xff0c;所有的接口均可通过SSH访问认证。 2、防火…

ideal远程Debug部署在服务器上的服务详解

ideal远程Debug部署在服务器上的服务详解 一 简介二 ideal配置步骤第一步&#xff1a;点击Edit Configurations选项添加远程连接第二步&#xff1a;配置Remote JVM debug参数第三步&#xff1a;服务的启动参数中添加第二步生成的命令并重新启动服务第四步&#xff1a;ideal启动…

联想电脑一键重装系统Win10操作方法

很多用户都会利用重装系统的方法&#xff0c;来解决系统崩溃、病毒感染等问题。但是&#xff0c;很多新手用户不知道联想电脑Win10系统重装的详细方法步骤&#xff0c;下面小编给大家详细介绍关于联想电脑Win10系统重装的操作方法&#xff0c;帮助大家轻松快速地完成系统的重装…

比postman更好用的接口管理软件——Apifox

比postman更好用的接口管理软件——Apifox 官网安装和登录Apifox功能使用团队管理&项目管理接口管理接口文档 Apifox 帮助文档 最近使用了一个好用的中文版接口管理软件&#xff0c;Apifox&#xff0c;以下介绍一下它的使用方式及好处。 官网 Apifox的官方地址&#xff1a…

微服务13-Seata的四种分布式事务模式

文章目录 XA模式实现XA模式 AT模式AT模式的脏写问题&#xff08;对同数据并发写的问题&#xff09;其他事务不获取全局锁的一个情况&#xff08;AT模式写隔离的实现&#xff09;实现AT模式 TCC模式TCC实现我们怎么样去判断是否空回滚和业务悬挂&#xff1f;业务分析 Saga模式总…

C++学习——C++函数的编译、成员函数的调用、this指针详解

以下内容源于C语言中文网的学习与整理&#xff0c;非原创&#xff0c;如有侵权请告知删除。 从博文的分析中可以看出&#xff0c;对象的内存中只保留了成员变量&#xff0c;除此之外没有任何其他信息&#xff0c;程序运行时不知道 stu 的类型为 Student&#xff0c;也不知道它…

基于nodejs+vue校园失物招领平台设计与实现

科学技术日新月异的如今&#xff0c;计算机在生活各个领域都占有重要的作用&#xff0c;尤其在信息管理方面&#xff0c;在这样的大背景下&#xff0c;学习计算机知识不仅仅是为了掌握一种技能&#xff0c;更重要的是能够让它真正地使用到实目 录 摘 要 I ABSTRACT II 目 录 II…

数据库系统概论学习 1 绪论

1.1.1 数据、数据库、数据库管理系统、数据库系统 一、数据 Data 数据是数据库中存储的基本对象 定义&#xff1a;描述事物的符号记录称为数据&#xff0c;描述事物的符号可以是数字、文字、图像、图形、声音、语言等表现形式&#xff0c;它们都可以经过数字化后存入计算机。…

六分科技CEO李阳:精准定位助力汽车智能化普及

10月10日&#xff0c;2023四维图新用户大会在上海成功举办。大会现场&#xff0c;六分科技展示了基于PPP-RTK技术的“星璨”产品和软硬件一体化解决方案。同时在智能驾驶主题论坛上&#xff0c;六分科技CEO李阳受邀发表了以《精准定位助力汽车智能化普及》为主题的演讲。 高精度…

微信小程序clearInterval无法关闭时间间隔器问题解决

今天在微信小程序遇到了一个问题 我的代码是这样的 // 关闭动画函数 AnimationOff() {//定义时间间隔器clearInterval(this.animationTimer) }, DefineAnimation() {//定义时间间隔器this.animationTimer setInterval(() > {console.log("执行");}, 1000) },但是…

【Power BI】Power BI 入门指南:版本、下载和报表创建的步骤

文章目录 一、前言二、了解 Power BI 版本三、下载 Power BI Desktop四、如何开始使用 Power BI Desktop五、在 Power BI Desktop 中创建报表六、文末总结 一、前言 Power BI 是微软于 2013 年推出的产品&#xff0c;为一款商业智能与数据可视化工具。它通过引人注目的视觉效果…

企业如何选择安全又稳定的文件传输协议

企业无论是内部的数据共享&#xff0c;还是与外部的合作交流&#xff0c;都需要通过网络进行文件的传输和交换。然而&#xff0c;文件传输它涉及到多方面的因素&#xff0c;例如文件的大小、数量、类型、敏感性、传输距离、网络环境等。这些因素都会影响到文件传输的各个方面&a…

WEB应用程序编程接口API

使用Web API Web API是网站的一部分&#xff0c;用于与使用具体URL请求特定信息的程序交互。这种请求称为API调用。请求的数据格式以易于处理的格式&#xff08;JSON,CSV&#xff09;返回。 Git和GitHub Git是一个分布式版本控制系统&#xff0c;帮助人们管理为项目所做的工作…

Intellij 安装配置 lombok

Intellij 安装配置 lombok 用 lombok 能够减少 setter/getter/noArgsConstructor 这样的 boilerplate 代码&#xff0c;所以用起来还是比较方便的。 刚开始以为直接安装到 maven 里面就能用了&#xff0c;运行的时候发现 Getter, Data 这些 annotation 根本找不到&#xff0c…

*常用函数

文章目录 nn.PReLU() 激活函数 nn.PReLU() 激活函数 PReLU(Parametric Rectified Linear Unit), 顾名思义&#xff1a;带参数的ReLU 其中a代表的是可学习的参数 ReLU、PReLU的比较&#xff1a; 如果ai0&#xff0c;那么PReLU退化为ReLU&#xff1b; 如果ai是一个很小的固定…

c++可变参数模板

不要做一个清醒的堕落者文章目录 可变参数模板的简介什么是可变参数 模板参数包参数包数据的获取(函数递归获取)参数包的获取(逗号表达式获取) 可变参数的应用emplace 可变参数模板的简介 c11添加的新特性能够让你创建可以接受改变的函数模板和类模板&#xff0c;C98/03&#…

深入篇【C++】总结<lambda表达式>与<包装器和bind>的使用与意义

深入篇【C】总结&#xff1c;lambda表达式&#xff1e;与&#xff1c;包装器和bind&#xff1e;的使用与意义 一.lambda表达式1.使用语法2.底层本质3.应用意义 二.包装器(适配器)1.使用语法2.解决问题①3.解决问题②4.应用场景:指令操作 三.bind (适配器)1.调整参数位置2.绑定参…

Kafka基础入门

Kafka介绍 Kafka是什么&#xff1f; kafka是一种分布式的&#xff0c;基于发布/订阅的消息系统。 Kafka的特点 分布式&#xff0c;吞吐量高&#xff0c;发布订阅模式&#xff0c;轻量灵活&#xff0c;较长时间持久化 Kafka的应用场景 解耦 原先一个微服务是通过接口&…

2023年中国芝麻酱行业供需分析:需求量同比增长3.5%[图]

芝麻酱也叫麻酱&#xff0c;是把炒熟的芝麻磨碎制成的食品&#xff0c;有香味&#xff0c;作为调料食用。根据所采用的芝麻的颜色&#xff0c;可分为白芝麻酱和黑芝麻酱&#xff1b;芝麻酱是群众非常喜爱的香味调味品之一。食用以白芝麻酱为佳&#xff0c;滋补益气的以黑芝麻酱…

动态内存管理(malloc calloc realloc free)--- C语言

文章目录 写在前面1. malloc 和 free函数1.1 malloc函数介绍1.2 free函数介绍 2. calloc函数3. realloc函数4. 常见的动态内存错误4.1 对NULL指针的解引用操作4.2 对动态开辟空间的越界访问4.3 对非动态开辟内存使用free释放4.4 使用free释放一块动态开辟内存的一部分4.5 对同一…