【uniapp】六格验证码输入框实现
效果图

代码实现
<view><view class="tips">已发送验证码至<text class="tips-phone">{{ phoneNumber }}</text></view><view class="code-input-wrap"><input class="code-input" v-model="codeNumber" type="number" :adjust-position="false" :auto-blur="true" maxlength="6" @input="handleInputClick" /><view class="code-list"><block v-for="(item, index) in 6" :key="index"><view :class="['code-list-item', codeNumber.length == index ? 'active-item' : '']">{{ codeNumber[index] }}</view></block></view></view><view class="resending" v-if="isSending">{{ '重新发送(' + counter + 's)' }}</view><view class="normal" v-else @click="handleResend">重新发送</view>
</view>
data() {return {phoneNumber: '',codeNumber: '',isPhoneValid: false,isCodeValid: false,isSending: false, // 验证码是否在发送中// 计时器对象timer: null,// 倒数60秒counter: 60}
},
methods: {// 输入验证码handleInputClick(e) {let val = e.detail.valuethis.codeNumber = valif (val && val.length == 6) {this.isCodeValid = true} else {this.isCodeValid = false}},// 获取验证码sendSmsCode() {if (this.isPhoneValid) {// 判断手机号格式是否符合要求if (!/^1[3456789]\d{9}$/.test(this.phoneNumber)) {uni.showToast({title: '手机号格式不正确',icon: 'none'})return false}// 判断复选框if (!this.isChecked) {this.showTips = truereturn false}// 调用接口,此处代码省略······}},// 倒计时countDown() {this.counter = 60this.isSending = truethis.timer = setInterval(() => {this.counter--if (this.counter < 0) {this.reset()}}, 1000)},// 重置倒计时reset() {this.isSending = falseif (this.timer) {clearInterval(this.timer)this.counter = 60this.timer = null}},// 重新发送handleResend() {this.codeNumber = ''this.sendSmsCode()}
}
.tips {font-size: 28rpx;font-weight: 400;line-height: 36rpx;.tips-phone {font-weight: bold;margin-left: 20rpx;}
}// 验证码输入
.code-input-wrap {margin: 40rpx 0;position: relative;height: 100rpx;.code-input {position: absolute;left: 0;top: 0;height: 100rpx;width: 100%;opacity: 0;z-index: 99;outline: none;}.code-list {position: absolute;left: 0;top: 0;width: 100%;height: 100rpx;display: flex;justify-content: space-between;.code-list-item {// flex: 1;width: 90rpx;height: 100rpx;background: #ffffff;border-radius: 16rpx;font-size: 36rpx;font-weight: 700;color: #adb3ba;line-height: 100rpx;text-align: center;margin-right: 10rpx;z-index: 5;box-sizing: border-box;}.code-list-item:last-child {margin-right: 0;}.active-item {border: 2rpx solid #ff466d;}}
}
.resending {font-size: 28rpx;font-weight: 500;line-height: 36rpx;margin-bottom: 60rpx;color: #a6acb2;
}
.normal {font-size: 28rpx;font-weight: 500;line-height: 36rpx;margin-bottom: 60rpx;color: #333;
}
相关文章:
【uniapp】六格验证码输入框实现
效果图 代码实现 <view><view class"tips">已发送验证码至<text class"tips-phone">{{ phoneNumber }}</text></view><view class"code-input-wrap"><input class"code-input" v-model"…...
【react hook】在react hook组件中,使用Antd Table组件,columns数据异步获取,list数据更新但没有rerender解决办法
情景描述 我们有一个react组件,显示了一个Antd Table组件,设置了一个columns变量并复制给Table的columns属性,由于我们请求的datasource来源是异步的,示例伪代码如下: const [columns, setColumns] useState([]); /…...
ChatGPT的图识别来了
前几天ChatGPT推出了Dall-E 3功能,可以根据文字和描述一段话来生成一个或者一组图。 这次又来重磅了,图识别又来了!换句话说,也即是文生图,图生文都可以实现了,一起来试试 1、解释图中的意思 ࿰…...
java Stream编程笔记
文章目录 Stream介绍什么是 Stream? Stream中间操作过滤操作(filter)映射操作(map)排序操作(sorted)截断操作(limit 和 skip) Stream 的终止操作forEach 和 peek聚合操作…...
顶顶通语音识别使用说明
介绍 顶顶通语音识别软件(asrproxy)是一个对接了多种语音识别接口的语音识别系统。可私有化部署(支持中文英文和方言等,支持一句话识别、实时流识别、多声道录音文件识别。 原理 asrproxy内嵌了阿里达摩院的开源语音识别工具包FunASR,后续我们也会使用自有的预料…...
重磅发布 OpenAI 推出用户自定义版 ChatGPT
文章目录 重磅发布 OpenAI 推出用户自定义版 ChatGPT个人简介 重磅发布 OpenAI 推出用户自定义版 ChatGPT OpenAI 首届开发者大会 (OpenAI DevDay) 于北京时间 11 月 7 日凌晨 02:00 开始,大会上宣布了一系列平台更新。其中一个重要更新是用户可以创建他们自己的自定…...
Java 幼儿园(20231111)读取 json 文件
1、功能场景 (1)多人合作开发一个功能模块时,需要调用外部接口 (2)对方接口的开发工作还没有完成,只能提供一个返回值的示例文件 json 文件。 (3)返回的 json 数据多达几百个字段。 …...
云计算、大数据技术的智慧工地,实现对建筑工地实时监测、管理和控制的一种新型建筑管理方式
智慧工地是利用物联网、云计算、大数据等技术,实现对建筑工地实时监测、管理和控制的一种新型建筑管理方式。 智慧工地架构: 1、终端层: 充分利用物联网技术、移动应用、智能硬件设备提高现场管控能力。通过RFID、传感器、摄像头、手机等终…...
功能案例 -- 通过开关,改变白天和黑夜
效果展示 代码展示 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><style>:root {--default-bac-color: #f…...
Linux编写一个极简版本的Shell
Linux编写一个极简版本的Shell 📟作者主页:慢热的陕西人 🌴专栏链接:Linux 📣欢迎各位大佬👍点赞🔥关注🚓收藏,🍉留言 本博客主要内容在Linux环境下ÿ…...
亚马逊云AI应用科技创新下的Amazon SageMaker使用教程
目录 Amazon SageMaker简介 Amazon SageMaker在控制台的使用 模型的各项参数 pytorch训练绘图部分代码 Amazon SageMaker简介 亚马逊SageMaker是一种完全托管的机器学习服务。借助 SageMaker,数据科学家和开发人员可以快速、轻松地构建和训练机器学习模型&#…...
Eigen:旋转向量(Angle-Axis)转换为四元素和旋转矩阵
0. 在固定欧拉角系下。 绕固定系旋转,旋转的先后顺序为X、Y、Z。当然也支持XYZ的任意顺序旋转。 1. 转为四元素 Eigen::Quaterniond q Eigen::AngleAxisd(yaw, Eigen::Vector3d::UnitZ()) *Eigen::AngleAxisd(pitch, Eigen::Vector3d::UnitY()) *Eigen::AngleAxi…...
C#8.0本质论第十二章--泛型
C#8.0本质论第十二章–泛型 C#通过泛型来促进代码重用,在词义上等价于C模板。 在泛型编程中,数据类型也是一种参数。 12.1如果C#没有泛型 为object的方法使用值类型时,“运行时”将自动对它进行装箱,获取值类型的实例时则需要…...
Python与ArcGIS系列(七)自动化打印地图
目录 0 简述1 获取可用打印机列表2 打印地图3 导出地图至PDF4 导出地图至图像0 简述 本篇介绍如何利用arcpy实现获取可用打印机列表、打印地图、导出地图至PDF和图像。 1 获取可用打印机列表 通过arcpy提供的ListPrinterNames()函数可以生成可用的打印机列表。 import arcpy.m…...
基于STM32单片机抢答器设计
**单片机设计介绍, 基于STM32单片机抢答器设计-Proteus仿真 文章目录 一 概要二、功能设计设计思路 三、 软件设计原理图 五、 程序六、 文章目录 一 概要 基于STM32单片机的抢答器设计可以用于教育和培训场景中的抢答游戏或考试环节。以下是一个基本的介绍设计步骤…...
冯·诺伊曼体系结构--操作系统
文章目录 1.认识冯诺依曼系统1.1约翰冯诺依曼1.2冯诺依曼结构1.3存储器的读写速度1.4对冯诺依曼结构的认识1.5冯诺依曼结构在生活中的演示 2.操作系统--“搞管理”的软件2.1概念2.2OS存在的意义2.3管理的方式2.4系统调用和库函数概念 1.认识冯诺依曼系统 1.1约翰冯诺依曼 1.2冯…...
IDEA插件开发--持久化配置信息方案
这里写自定义目录标题 配置信息持久化存储保存配置文件的方式每种方式的实现方案1.PropertiesComponent:2.PersistentStateComponent:3.Project Settings:4.外部文件: 5.数据库:6.加密数据:7,自定义配置文件…...
Vscode禁止插件自动更新
由于电脑的vscode版本不是很新。2022.10月份的版本1.7.2,电脑vscode的python插件装的也是2022年4月份的某个版本,但插件经常自动更新,导致python代码无法Debug,解决办法: 点设置,搜autoUpdate, 把红色框选成无...
Zookeeper篇---第六篇
系列文章目录 文章目录 系列文章目录一、请简述Zookeeper的选主流程二、为什么Zookeeper集群的数目,一般为奇数个?三、知道Zookeeper监听器的原理吗?一、请简述Zookeeper的选主流程 Zookeeper的核心是原子广播,这个机制保证了各个Server之间的同步。实现这个机制的协议叫做…...
mysql数据库存储过程之游标(光标cursor)
游标是用来存储查询结果集的数据类型,在存储过程和函数中可以使用游标对结果集进行循环的处理。游标的使用包括游标的声明、open、fetch和close。 一、语法。 #声明游标 declare 游标名称 cursor for 查询语句; #开启游标 open 游标名称; #获取游标记录 fetch 游标…...
[具身智能-354]:定制化无人机系统的组成
无人机系统整体采用“平台-链路-指控-保障”一体化架构,主要由以下核心分系统、软件数字架构及配套接口模块构成:一、 无人机飞行平台机体与起降结构:高强度轻量化机身、起落架及高原/大风环境适应性设计,支撑安全起降与地面滑行。…...
Qwen3-Reranker-8B批处理优化:提升吞吐量的关键技术
Qwen3-Reranker-8B批处理优化:提升吞吐量的关键技术 1. 引言 如果你正在使用Qwen3-Reranker-8B处理大量文本重排序任务,可能会遇到这样的困扰:单个请求处理很快,但并发量一上来,系统就变得缓慢甚至崩溃。这不是模型本…...
DAMOYOLO-S模型深度解析:实时口罩检测背后的算法奥秘
DAMOYOLO-S模型深度解析:实时口罩检测背后的算法奥秘 1. 引言 在计算机视觉领域,实时目标检测一直是个热门话题。特别是在公共卫生场景中,口罩检测技术成为了智能监控系统的关键组成部分。今天我们要深入探讨的DAMOYOLO-S模型,正…...
Z-Image-Turbo-辉夜巫女辅助JDK新特性学习:为抽象概念生成可视化示例
Z-Image-Turbo-辉夜巫女辅助JDK新特性学习:为抽象概念生成可视化示例 对于Java开发者来说,学习新版JDK引入的特性,比如虚拟线程、模式匹配这些概念,有时候就像是在读一本没有插图的说明书。文字描述很详细,但脑子里就…...
从Proteus仿真到实战:51单片机驱动ADC0808构建智能电压监测系统
1. 从基础电压表到智能监测系统的升级思路 很多电子爱好者第一次接触51单片机时,都会尝试制作数字电压表这个经典项目。我当年在学校实验室里,也是从这个小项目开始入门的。但基础电压表只能显示数值,就像只会报数的机器人,缺少实…...
Redis AOF 文件优化技巧
Redis作为高性能内存数据库,其持久化机制中的AOF(Append Only File)通过记录写操作命令确保数据安全,但随着运行时间增长,AOF文件可能膨胀至GB级别,影响性能。本文将分享几个关键优化技巧,帮助开…...
IotNetESP32:面向i-ot.net平台的嵌入式物联网连接抽象库
1. 项目概述IotNetESP32 是一款专为 ESP32 平台设计的嵌入式物联网通信中间件库,其核心定位并非替代底层协议栈,而是构建在 ESP-IDF 或 Arduino-ESP32 框架之上、面向应用层的“连接抽象层”。该库通过封装 WiFi 管理、MQTT 客户端、HTTP 客户端三大基础…...
SAP的定义与背景
SAP(Systems, Applications, and Products in Data Processing)是一家德国软件公司,也是其核心企业资源规划(ERP)软件的名称。SAP ERP系统用于整合企业业务流程,涵盖财务、物流、人力资源、生产等模块&…...
CopyOnWriteArrayList 实现原理
什么是CopyOnWriteArrayList?CopyOnWriteArrayList 是 Java 并发包 (java.util.concurrent) 中一个非常独特且重要的线程安全集合。与 Collections.synchronizedList 不同,CopyOnWriteArrayList 不依赖外部同步,而是通过内部机制实现并发控制…...
去哪儿商户端分析
声明: 本文章中所有内容仅供学习交流使用,不用于其他任何目的,抓包内容、敏感网址、数据接口等均已做脱敏处理,严禁用于商业用途和非法用途,否则由此产生的一切后果均与作者无关! 部分python代码data {"departur…...
