当前位置: 首页 > 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圆的…...

all-MiniLM-L6-v2开发者案例:集成至LangChain实现动态RAG检索链路

all-MiniLM-L6-v2开发者案例&#xff1a;集成至LangChain实现动态RAG检索链路 在构建智能问答或文档分析系统时&#xff0c;一个核心挑战是如何从海量文本中快速、准确地找到最相关的信息。传统的基于关键词的搜索&#xff0c;往往因为无法理解语义而“答非所问”。今天&#…...

算法 POJ1029

一&#xff0e;题目大意假币描述“金条”银行从可靠来源收到的信息&#xff0c;在他们最后一组的 N 枚硬币中&#xff0c;恰好有一枚硬币是假的&#xff0c;并且重量与其他硬币不同&#xff08;而所有其他硬币的重量都相同&#xff09;。经济危机之后&#xff0c;他们只有一个简…...

如何用NanoMsg的6种通信模式搞定分布式系统开发?附代码示例

如何用NanoMsg的6种通信模式构建高可靠分布式系统&#xff1f;实战代码解析 在分布式系统开发中&#xff0c;通信模式的选择往往决定了整个架构的扩展性和可靠性。NanoMsg作为轻量级高性能通信库&#xff0c;提供了6种经过验证的通信模式&#xff0c;每种都对应着特定的应用场景…...

OpenClaw日志分析进阶:百川2-13B-4bits量化模型自动错误诊断

OpenClaw日志分析进阶&#xff1a;百川2-13B-4bits量化模型自动错误诊断 1. 为什么需要自动化日志分析 深夜两点&#xff0c;我的手机突然震动起来——服务器又报警了。强撑着睡意打开终端&#xff0c;面对满屏的报错日志&#xff0c;那种无力感相信每个运维人都深有体会。传…...

上周刚把三菱PLC+MCGS的电机测速课设收尾,趁着热乎劲把细节唠唠,顺便把踩过的坑也记一下,省得下次忘光

No.1235 基于三菱 PLC和MCGS组态电机测速系统控制设计这个项目说白了就是用三菱PLC算电机的转速&#xff0c;再用MCGS组态屏把转速实时显示出来&#xff0c;用到的东西挺基础&#xff1a;FX3U PLC、1000线增量式编码器、直流减速电机、MCGS组态屏&#xff0c;再加一根USB转RS48…...

OpenClaw备份策略:GLM-4.7-Flash智能管理本地与云端存储

OpenClaw备份策略&#xff1a;GLM-4.7-Flash智能管理本地与云端存储 1. 为什么需要智能备份方案 上周我的移动硬盘突然罢工&#xff0c;导致三个月的项目文档全部丢失。这次惨痛经历让我意识到&#xff1a;传统备份方式已经无法满足现代工作需求。手动备份不仅耗时耗力&#…...

零代码玩转OpenClaw:ollama-QwQ-32B自动化脚本生成教程

零代码玩转OpenClaw&#xff1a;ollama-QwQ-32B自动化脚本生成教程 1. 为什么选择OpenClawollama-QwQ-32B组合&#xff1f; 上周我在整理旅行照片时&#xff0c;面对上千张命名混乱的图片文件&#xff0c;突然意识到&#xff1a;这不正是测试OpenClaw自动化能力的绝佳场景吗&…...

新能源企业数字化转型:从“卖设备“到“卖服务“的服务管理实践

在"双碳"目标驱动下&#xff0c;新能源产业正经历从"投建"到"运营服务"的战略转型。光伏、风电、储能等设备遍布全国各地&#xff0c;售后服务与运维效率直接关系到发电收益与品牌口碑。 然而&#xff0c;很多新能源企业面临一个共同的困境&…...

RBD_Timer:嵌入式轻量级多定时器时间轮调度框架

1. RBD_Timer 库深度解析&#xff1a;面向嵌入式实时系统的轻量级多定时器管理框架1.1 问题根源&#xff1a;Arduino 原生delay()与中断阻塞对实时性的破坏在 Arduino 生态中&#xff0c;delay()函数被广泛用于实现时间等待逻辑。然而其底层实现本质是忙等待&#xff08;busy-w…...

终极指南:使用Legacy-iOS-Kit轻松降级、越狱和修复旧款iOS设备

终极指南&#xff1a;使用Legacy-iOS-Kit轻松降级、越狱和修复旧款iOS设备 【免费下载链接】Legacy-iOS-Kit An all-in-one tool to downgrade/restore, save SHSH blobs, and jailbreak legacy iOS devices 项目地址: https://gitcode.com/gh_mirrors/le/Legacy-iOS-Kit …...