当前位置: 首页 > news >正文

vue 实现数字验证码功能

需求:写了一个 手机发送验证码后 输入固定验证码的功能

 

 封装成一个组件,如下:

<template><div class="conts"><div class="box"><div class="code_list"><div :class="[ 'code_item', hideIndex == 0 ? 'code_item-focus' : '', value[0] ? 'shows_shaw' : '', ]">{{ value[0] }}</div><div :class="[ 'code_item', hideIndex == 1 ? 'code_item-focus' : '', value[1] ? 'shows_shaw' : '', ]">{{ value[1] }}</div><div :class="[ 'code_item', hideIndex == 2 ? 'code_item-focus' : '', value[2] ? 'shows_shaw' : '', ]">{{ value[2] }}</div><div :class="[ 'code_item', hideIndex == 3 ? 'code_item-focus' : '', value[3] ? 'shows_shaw' : '', ]">{{ value[3] }}</div></div><input v-model="value" class="field-input" type="number" maxlength="4" @input="input()" @focus="focus()" @blur="blur()" /></div></div>
</template><script>
export default {data() {return {value: '',index: 0,hideIndex: null,show_box: false,}},methods: {input() {const v = this.value.replace(/[^\d]/g, '');this.value = v;this.index = v.length;this.hideIndex = v.length;this.$emit('getPassword', v);},// 获取焦点focus() {this.hideIndex = this.index;this.show_box = true;},// 失去焦点blur() {this.hideIndex = null;this.show_box = false;},},
}
</script><style lang="less">
.conts {width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;text-align: center;.box {position: relative;width: 85%;overflow: hidden;.code_list {display: flex;justify-content: space-between;border: 1px solid transparent;padding: 5px;border-radius: 3px;}}.field-input {box-sizing: border-box;position: absolute;top: 0;right: 0;width: 100%;height: 59px;padding: 0;border: none;outline: none;opacity: 0;background: transparent;}
}
.shows_shaw {border: 1px solid #0187fb !important;
}
.code_item {box-sizing: border-box;width: 59px;height: 59px;line-height: 59px;font-size: 24px;text-align: center;font-weight: 400;background-color: #f2f5f4;border: 1px solid transparent;border-radius: 4px;margin-right: 7px;&:last-child {margin-right: 0;}
}
.code_item-focus {border-color: #0187fb;&::before {content: "";display: block;width: 2px;height: 24px;margin: 17px auto;background: #0187fb;animation: blink 1s steps(1) infinite;}
}
@keyframes blink {50% {opacity: 0;}
}
</style>

引用

<room-password @getPassword="getPassword"></room-password>/引入
import roomPassword from '@/components/roomPassword'//方法getPassword(val) {console.log('val', val);},

相关文章:

vue 实现数字验证码功能

需求&#xff1a;写了一个 手机发送验证码后 输入固定验证码的功能 封装成一个组件,如下: <template><div class"conts"><div class"box"><div class"code_list"><div :class"[ code_item, hideIndex 0 ? co…...

【计算机网络】HTTP协议详解(举例解释,超级详细)

文章目录 一、HTTP协议简单介绍 1、1 什么是HTTP协议 1、2 再次理解“协议” 二、HTTP请求 2、1 HTTP的工作过程 2、1、1 demo代码 2、2 URL 介绍 2、2、1 urlencode 和 urldecode 2、3 HTTP 请求格式 三、HTTP响应 3、1 响应demo 3、2 HTTP 响应格式 四、HTTP 请求和响应中的…...

PCB放置过孔技巧

合理的放置过孔能有效的节约面积。 我们根据嘉立创的pcb工艺能力中写出单双面板最小过孔为0.3mm(内径)/0.5mm(外径) 设置过孔尺寸外直径为24mil&#xff08;0.61mm&#xff09;&#xff09;内直径为12mil&#xff08;0.305mm&#xff09; 嘉立创PCB工艺加工能力范围说明-嘉立…...

淘宝商品详情接口数据采集用于上货,无货源选品上货,采集淘宝天猫商品详情数据

淘宝商品详情接口数据采集可用于上货。先通过关键字搜索接口&#xff0c;抓取到批量的商品ID&#xff0c;再将商品ID传入商品详情数据采集接口的请求参数中&#xff0c;从而达到批量抓取商品详情数据的功能。 接口名称&#xff1a;item_get&#xff0c;获取商品详情数据&#…...

DoS和DDos攻攻击

介绍 DDoS 和 DoS 攻击是我们最常见的网络攻击之一&#xff0c;而且历史相当悠久&#xff0c;算是很经典的两种攻击方式&#xff0c;但它们实际上是如何运作的呢&#xff1f; 虽然两者基本上都能够让工作停摆&#xff0c;但其中有很大的差异&#xff0c;接下来我们将逐一说明&a…...

Python实时采集Windows CPU\MEMORY\HDD使用率

文章目录 安装psutil库在Python脚本中导入psutil库获取CPU当前使用率&#xff0c;并打印结果获取内存当前使用率&#xff0c;并打印结果获取磁盘当前使用情况&#xff0c;并打印结果推荐阅读 要通过Python实时采集Windows性能计数器的数据&#xff0c;你可以使用psutil库。psut…...

【改造中序遍历算法】1038. 从二叉搜索树到更大和树

1038. 从二叉搜索树到更大和树 解题思路 改造中序遍历算法先遍历右子树 然后累加当前节点的值 再遍历左子树 /*** Definition for a binary tree node.* public class TreeNode {* int val;* TreeNode left;* TreeNode right;* TreeNode() {}* TreeNode…...

克服网络安全压力:如何掌控无限的云数据

管理云中的数字风险比以往任何时候都更加重要。数字化转型引发的云数据呈指数级增长&#xff0c;为安全分析师创造了一个更大的威胁环境。随着威胁行为者继续危害组织最敏感的数据&#xff0c;这一挑战将会加剧。 预计未来五年全球网络犯罪成本将激增&#xff0c;从 2022 年的…...

【数据结构和算法】--N叉树中,返回某些目标节点到根节点的所有路径

目录 一、前言二、具体实现及拓展2.1、递归-目标节点到根节点的路径数据2.2、list转换为tree结构2.3、tree转换为list结构 一、前言 这么多年工作经历中&#xff0c;“数据结构和算法”真的是超重要&#xff0c;工作中很多业务都能抽象成某种数据结构问题。下面是项目中遇到的…...

进程和线程的区别 线程之间共享的资源

线程和进程都是操作系统中的执行单位&#xff0c;但它们在以下几个方面存在区别&#xff1a; 相同处&#xff1a; 1.执行环境&#xff1a;线程和进程都有自己的执行上下文&#xff0c;包括程序计数器、寄存器和栈&#xff0c;可以独立执行指令。 2.并发性&#xff1a;线程和进…...

基于Matlab实现logistic方法(源码+数据)

Logistic回归是一种常用的分类算法&#xff0c;适用于二分类问题。本文将介绍如何使用Matlab实现Logistic回归方法&#xff0c;并通过一个示例演示其应用。 文章目录 引言实现步骤1. 数据准备2. 特征缩放3. 模型训练4. 模型评估 源码数据下载 引言 Logistic回归是一种广泛应用…...

leetCode 121. 买卖股票的最佳时机 贪心算法

给定一个数组 prices &#xff0c;它的第 i 个元素 prices[i] 表示一支给定股票第 i 天的价格。 你只能选择 某一天 买入这只股票&#xff0c;并选择在 未来的某一个不同的日子 卖出该股票。设计一个算法来计算你所能获取的最大利润。 返回你可以从这笔交易中获取的最大利润。…...

《Oracle系列》Oracle 索引使用情况查看

查询用户的索引 select index_name,table_name,tablespace_name,index_type,uniqueness,statusfrom dba_indexeswhere owner <用户名>;查询用户的索引列 select index_name,table_name,column_name,index_owner,table_ownerfrom dba_ind_columnswhere table_owner &l…...

解决Invalid bound statement (not found)错误~

报错如下所示&#xff1a; 找了好久&#xff0c;刚开始以为是名称哪里写的有问题&#xff0c;但仔细检查了好多遍都不是 最后发现了问题如下所示&#xff1a; UserMapper里面的内容被我修改了&#xff0c;但classes中的内容还是原来的内容&#xff0c;所以才导致了编译器报错n…...

基于SpringBoot的反诈宣传平台设计与实现(源码+lw+部署文档+讲解等)

文章目录 前言具体实现截图论文参考详细视频演示为什么选择我自己的网站自己的小程序&#xff08;小蔡coding&#xff09;有保障的售后福利 代码参考源码获取 前言 &#x1f497;博主介绍&#xff1a;✌全网粉丝10W,CSDN特邀作者、博客专家、CSDN新星计划导师、全栈领域优质创作…...

【改进哈里鹰算法(NCHHO)】使用混沌和非线性控制参数来提高哈里鹰算法的优化性能,解决车联网相关的路由问题(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…...

【C语言】宏定义

&#x1f6a9; WRITE IN FRONT&#x1f6a9; &#x1f50e; 介绍&#xff1a;"謓泽"正在路上朝着"攻城狮"方向"前进四"&#x1f50e;&#x1f3c5; 荣誉&#xff1a;2021|2022年度博客之星物联网与嵌入式开发TOP5|TOP4、2021|2222年获评百大博…...

库存三层模型概述

库存分层 &#xff08;1&#xff09;电商库存体系分为三层&#xff1a;销售层、调度层、仓库层。 库存三层模型&#xff1a;销售库存&#xff0c;调度层属于订单领域-履约。实物库存属于库存领域 WMS的库存跟调度层是一致的。 但是销售库存跟调度层可能不一致&#xff0c;因为…...

SNERT预备队招新CTF体验赛-Web(SWCTF)

目录 1、F12 2、robots 3、game1-喂青蛙 4、game 2 - flap bird 5、game 3 - Clash 6、Get&Post 7、sql &#xff08;1&#xff09;手工注入 &#xff08;2&#xff09;工具注入 8、命令执行漏洞 9、文件上传漏洞 10、文件泄露 11、php反序列化漏洞 12、PHP绕…...

OpenGLES:绘制一个彩色、旋转的3D圆柱

一.概述 上一篇博文讲解了怎么绘制一个彩色旋转的立方体 这一篇讲解怎么绘制一个彩色旋转的圆柱 圆柱的顶点创建主要基于2D圆进行扩展&#xff0c;与立方体没有相似之处 圆柱绘制的关键点就是将圆柱拆解成&#xff1a;两个Z坐标不为0的圆 一个长方形的圆柱面 绘制2D圆的…...

【QT开发(6)】0926-QT 中加入 fastDDS 通信库的程序使用说明

在智能驾驶中&#xff0c;DDS有可能被广泛使用&#xff0c;因此推出这篇说明教程。 1、基于【QT开发&#xff08;5&#xff09;】教程的项目文档进行开发 2、安装DDS 查看《【eProsima Fast DDS&#xff08;1&#xff09;】安装eProsima Fast DDS》 至少安装: foonathan_m…...

js 判断字符串中是否包含某个字符串

方法一(推荐使用): indexOf() indexOf() 方法&#xff1a;返回某个指定的字符串值在字符串中首次出现的位置。如果要检索的字符串值没有出现&#xff0c;则该方法返回 -1。 var str "LiHeErNAN"; console.log(str.indexOf("A") ! -1 ); // true方法二:m…...

部署在阿里云ECS服务器上的微服务项目中获取到的时间和windows的时间不一样的问题

继上一篇文章《阿里云ECS服务器无法发送邮件问题解决方案》之后&#xff0c;又发现登录的时候发送邮件中的时间和自己windows上的时间不一样&#xff0c;大概找了一下原因&#xff0c;是LocaDateTime使用的时区不一样导致的远程服务器和本机时间不一致。 只需要在LocaDateTime…...

怎么通过portainer部署一个vue项目

这篇文章分享一下今天通过docker打包vue项目&#xff0c;并使用打包的镜像在portainer上部署运行&#xff0c;参考了vue-cli和docker的官方文档。 首先&#xff0c;阅读vue-cli关于docker部署的说明 vue-cli关于docker部署的说明https://cli.vuejs.org/guide/deployment.html#…...

Springboot实现websocket(连接前jwt验证token)

背景 用户连接服务器weksocket前&#xff0c;需经过jwt的token验证&#xff08;token中包含账号信息&#xff09;&#xff0c;验证合法后&#xff0c;才可以于服务器正常交互。 实现 一、配置依赖&#xff08;pom.xml&#xff09; <!-- websocket --><dependency&g…...

2023/10/3

平荒尽处是春山 二零二三年的十月 似乎已经过去了很久很久 没有了曾经的意气风发 也没有了歌伴夜声 之前一直不知道自己为什么喜欢打篮球 虽然打得不好 但是今天突然明白了 我喜欢的不是过人后的喜悦 而是篮球应声入网的清脆的声音 当然 出来进球 还有的是擦筐而出和三不沾 但是…...

zemax场曲/畸变图与网格畸变图

网格畸变是XY两个方向上的几何畸变&#xff0c;是不同视场实际像高与近轴像高的偏差。 垂轴放大率在整个视场范围内不能保持常数 当一个有畸变的光学系统对一个方形的网状物体成像时,若δy>0&#xff0c;则主光线的交点高度y比理想像高y低,视场越大&#xff0c;低得越多&a…...

【小尘送书-第六期】《巧用ChatGPT轻松玩转新媒体运营》AI赋能运营全流程,帮你弯道超车、轻松攀登运营之巅

大家好&#xff0c;我是小尘&#xff0c;欢迎你的关注&#xff01;大家可以一起交流学习&#xff01;欢迎大家在CSDN后台私信我&#xff01;一起讨论学习&#xff0c;讨论如何找到满意的工作&#xff01; &#x1f468;‍&#x1f4bb;博主主页&#xff1a;小尘要自信 &#x1…...

GD32F10 串口通信

1. 什么是通信 通信&#xff0c;指人与人或人与自然之间通过某种行为或媒介进行的信息交流与传递&#xff0c;从广义上指需要信息的双方或多方在不违背各自意愿的情况下采用任意方法&#xff0c;任意媒质&#xff0c;将信息从某方准确安全地传送到另方。通信双方如果想正确传输…...

QT常用控件介绍

QT信号与槽机制 connect (A,SIGNLA(aaa())&#xff0c;B, SLOT(bbb()))&#xff1b; GUI继承简介 布局管理器 垂直布局水平布局网格布局表单布局 输出控件 Label: 标签Text Browser: 文本浏览器Graphics View : 图形视图框架Calendar Widget: 日历控件LCD Number: 液晶字体数…...

临朐网站制作哪家好/临沂森拓网络科技有限公司

在使用nginx访问项目时会出现如下情况&#xff1a; 在加上index.php时访问效果如下&#xff1a; 由此可见是因为重写的原因&#xff0c;在配置文件中加入如下代码&#xff1a; location / {index index.html index.htm index.php;#autoindex on;#添加部分if (!-e $request_…...

作文库网站/seo诊断网站

想必很多使用华为手机的朋友出现了手机登录不上QQ邮箱这个问题吧&#xff0c;邮箱用不了&#xff0c;账户名密码没错啊&#xff0c;这是怎么回事啊&#xff1f;经小编发现&#xff0c;原来在第三方客户端登录QQ邮箱时&#xff0c;需要开启对应的客户端协议服务。系统默认设置为…...

俄罗斯做电商网站/谷歌关键词搜索量数据查询

1.#列表可重复&#xff0c;类型不同&#xff0c;用&#xff3b;&#xff3d;表示 listA [a, b, c, 1, 2] # 遍历list for item in listA:print(item)#元组是只读的&#xff0c;不能修改。元组用“()”表示 tuple1 (1,2,a,4,5,6) for item in tuple1:print(item)#字典定义了键…...

网站 数据库选择/google seo 优化教程

1&#xff0c;基本了解&#xff1a; tftp是基于UDP来下载远程文件的网络协议。 作用&#xff1a;比较好适用于初始化时下载少量的文件数据。比如内核和设备树。 当有大量文件且会有定时的新文件加入调试的话&#xff0c;使用nfs的创建的共享目录较好。所以一般将制作好的根文件…...

全站加速 wordpress/营销自动化

我们常在 Linux 系统中使用 dd 命令做文件或设备的读取和写入操作&#xff0c;只是 dd 对读写进度和速度显示不是实时的&#xff0c;下面以两个磁盘设备之间的备份为例说明两种如何在 dd 命令运行过程中得到进度和速度的方法。1、通过 dd 的信号得到进度和速度&#xff1a;新的…...

常见的网站结构有/交换链接的其它叫法是

又到周五了&#xff0c;时间过得溜溜快啊。这一周在Joans的帮助下&#xff0c;开始学习MVC3。经过四天的查看资料&#xff0c;对MVC3有了简单的认识。学习MVC3涉及的知识包括&#xff1a;C#&#xff0c;Razor&#xff0c;HTML&#xff0c;CCS&#xff0c;JavaScript&#xff0c…...