登录中获取验证码的节流

一. 验证码框

<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 = truelet sum = 60this.text = sum + 's后在尝试'let setset = setInterval(() => {sum--this.text = sum + 's后在尝试'if (sum == 0){this.disabled = falsethis.text = "获取验证码"clearInterval(set)}}, 1000)
},

是不是很简单!

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

JavaFX: 使用本地openjfx包

JavaFX: 使用本地openjfx包 1、注释配置2、下载openjfx包3、导入openjfx的jar包 1、注释配置 build.gradle配置注释&#xff1a; 2、下载openjfx包 下载javaFx地址&#xff1a;https://gluonhq.com/products/javafx/ 3、导入openjfx的jar包

求三维坐标绕坐标轴旋转后的坐标值

目的 旋转矩阵 应用 沿单个坐标轴旋转 沿多个坐标系旋转 目的 由于其他文章原理介绍比较详细&#xff0c;但应用方面较少。本文直接介绍旋转矩阵的应用&#xff0c;条件为坐标系不变&#xff0c;求旋转后的三维坐标。本文方法较傻瓜式&#xff0c;需要自己进行测试以确认是…

Spring Boot 开发环境热部署

Spring Boot 项目无法像前端项目那样&#xff0c;修改源代码后刷新网页就能即时看到效果&#xff0c;需要先暂停运行&#xff0c;再重新启动&#xff0c;最后刷新网页。 为了避免这一麻烦的操作&#xff0c;我们可以设置热部署&#xff0c;启动服务后不论怎么修改源码&#xf…

Compose 组件 - 分页器 HorizontalPager、VerticalPager

一、概念 类似于 ViewPager&#xff0c;1.4 版本之前需要借助 accompanis 库&#xff0c;底层基于 LazyColumn、LazyRow 实现&#xff0c;在使用上也基本相同。默认情况下 HorizontalPager 占据屏幕的整个宽度&#xff0c;VerticalPager 会占据整个高度。 fun HorizontalPager(…

基于 ACK Fluid 的混合云优化数据访问(五):自动化跨区域中心数据分发

作者&#xff1a;车漾 前文回顾&#xff1a; 本系列将介绍如何基于 ACK Fluid 支持和优化混合云的数据访问场景&#xff0c;相关文章请参考&#xff1a; -基于 ACK Fluid 的混合云优化数据访问&#xff08;一&#xff09;&#xff1a;场景与架构 -基于 ACK Fluid 的混合云优…

HTML5播放 M3U8的hls流地址

在HTML5页面上播放M3U8的hls流地址 <!DOCTYPE html> <html> <head> <meta charset"UTF-8"> <title>视频播放</title> <script src"https://cdn.jsdelivr.net/npm/hls.jslatest"></script> &…

pdf格式的简历中的照片太小,如何修改图片的大小

问题描述&#xff1a;在使用一些在线版生成软件制作简历时&#xff0c;比如使用超级简历制作的简历存在着一个照片的尺寸比较小。如何去修改pdf中的证件照大小。 解决办法&#xff1a;使用一些在线编辑pdf的软件&#xff0c;比如我随便找了一个&#xff08;在线编辑pdf&#x…

云开发校园宿舍/企业/部门/物业故障报修小程序源码

微信小程序云开发校园宿舍企业单位部门物业报修小程序源码&#xff0c;这是一款云开发校园宿舍报修助手工具系统微信小程序源码&#xff0c;适用于学校机房、公司设备、物业管理以及其他团队后勤部&#xff0c;系统为简单云开发&#xff0c;不需要服务器域名即可部署&#xff0…

CentOS 挂载新磁盘以及磁盘扩容操作教程

1.搭载新加磁盘 # 查看磁盘 fdisk -l #新盘&#xff08;/dev/sdb&#xff09;创建分区 #虚拟机 fdisk /dev/sdb #阿里云 fdisk /dev/vdb #创建/dev/sdb1为新的PV&#xff08;物理卷&#xff09; 【创建物理卷命令】 #虚拟机 pvcreate /dev/sdb1 #阿里云 pvcreate /dev/vdb1 查…

竞赛选题 深度学习YOLOv5车辆颜色识别检测 - python opencv

文章目录 1 前言2 实现效果3 CNN卷积神经网络4 Yolov56 数据集处理及模型训练5 最后 1 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; **基于深度学习YOLOv5车辆颜色识别检测 ** 该项目较为新颖&#xff0c;适合作为竞赛课题方向&#xff0…

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

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

如何开始使用 Kubernetes RBAC

基于角色的访问控制 (RBAC) 是一种用于定义用户帐户可以在 Kubernetes 集群中执行的操作的机制。启用 RBAC 可以降低与凭证盗窃和帐户接管相关的风险。向每个用户授予他们所需的最低权限集可以防止帐户拥有过多的特权。 大多数流行的 Kubernetes 发行版都从单个用户帐户开始,…

【每日一题】只出现一次的数字 II

文章目录 Tag题目来源题目解读解题思路方法一&#xff1a;位运算 写在最后 Tag 【位运算】【数组】【2023-10-15】 题目来源 137. 只出现一次的数字 II 题目解读 找出数组中仅出现一次的数字&#xff0c;其余数字仅出现三次。要求线性时间复杂度求解。 解题思路 本题的朴素…

C#之常见图形文件格式及其特点

部分内容来源于Microsoft相关文档&#xff01; 日常生活中和软件开发中&#xff0c;经常会用到图形文件格式&#xff1a; BMP BMP 是 Windows 用来存储与设备无关的图像和与应用程序无关的图像的标准格式。 给定 BMP 文件的每像素位数&#xff08;1、4、8、15、24、32 或 64…

NCV7724DQBR2G车规级半桥电机驱动芯片-专为汽车,工业自动化应用提供完美解决方案

车规级半桥电机驱动芯片是一种用于驱动直流电机的芯片&#xff0c;常用于电动汽车、电动自行车等领域。它可以控制电机的转速和方向&#xff0c;并且具有过流保护、过温保护等功能&#xff0c;可以保证电机的安全运行。 NCV7724DQBR2G是一款车规级八通道半桥驱动器&#xff0c;…

论文浅尝 | 深度神经网络的模型压缩

笔记整理&#xff1a;闵德海&#xff0c;东南大学硕士&#xff0c;研究方向为知识图谱 链接&#xff1a;https://arxiv.org/abs/1412.6550 动机 提高神经网络的深度通常可以提高网络性能&#xff0c;但它也使基于梯度的训练更加困难&#xff0c;因为更深的网络往往更加强的非线…

C# 图解教程 第5版 —— 第3章 C# 编程概述

文章目录 3.1 一个简单的 C# 程序&#xff08;*&#xff09;3.2 标识符3.3 关键字3.4 Main&#xff1a;程序的起始点&#xff08;*&#xff09;3.5 空白3.6 语句&#xff08;*&#xff09;3.7 从程序中输出文本3.7.1 Write&#xff08;*&#xff09;3.7.2 WriteLine&#xff08…

【Linux】:Linux环境与版本

以下哪个命令输出Linux内核的版本信息 A.uname -r B.vmstat C.sar D.stat uname -r 查看linux内核版本信息 vmstat 报告关于内核线程、虚拟内存、磁盘、陷阱和 CPU 活动的统计信息 sar 主要帮助我们掌握系统资源的使用情况&#xff0c;特别是内存和CPU的使用情况 stat 用于显示…

表单规定输入域的选项列表(html5新元素)

datalist datalist 元素规定输入域的选项列表。 datalist属性规定 form 或 input 域应该拥有自动完成功能。当用户在自动完成域中开始输入时&#xff0c;浏览器应该在该域中显示填写的选项&#xff1a; 使用 input元素的列表属性与datalist元素绑定. 还有一定的搜索能力&…

vue2+elementUI,vue3+elementPlus解决form中的下拉列表回写显示id,不显示label

三个问题&#xff1a; 问题1&#xff1a;vue2elementui中form下的下拉列表回写&#xff0c;赋值之后会出现更改不了值的情况 问题2&#xff1a;表单中绑定的值是v-model‘form.father.son’ 这种多级响应不了&#xff0c;把这种多级改成单级 v-model‘form.son’ 就不会出现值…