【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 游标…...
无需Root!Termux+Samba三步搭建手机NAS,跨平台文件共享无忧
1. 为什么你需要手机NAS? 每次用微信传文件都要忍受压缩画质?电脑和手机互传文件还得找数据线?家里多台设备共享电影资源只能靠U盘来回倒腾?这些问题我都遇到过,直到发现用旧手机搭建NAS这个神器方案。最让我惊喜的是…...
推荐系统架构设计思路
推荐系统架构设计思路 在信息爆炸的时代,推荐系统已成为互联网平台提升用户体验的核心技术之一。无论是电商、社交媒体还是内容平台,推荐系统都能通过分析用户行为数据,精准推送个性化内容,从而提高用户粘性和商业价值。本文将介…...
终极指南:用AKShare快速构建免费金融数据自动化分析系统
终极指南:用AKShare快速构建免费金融数据自动化分析系统 【免费下载链接】akshare AKShare is an elegant and simple financial data interface library for Python, built for human beings! 开源财经数据接口库 项目地址: https://gitcode.com/gh_mirrors/aks/…...
暗黑2存档编辑器实战宝典:d2s-editor深度评测与完全指南
暗黑2存档编辑器实战宝典:d2s-editor深度评测与完全指南 【免费下载链接】d2s-editor 项目地址: https://gitcode.com/gh_mirrors/d2/d2s-editor 作为一名暗黑破坏神2的忠实玩家,你是否曾为刷不到心仪的装备而苦恼?是否想尝试不同的b…...
Intv_AI_MK11 硬件开发辅助:Proteus仿真与电路设计问题咨询
Intv_AI_MK11 硬件开发辅助:Proteus仿真与电路设计问题咨询 1. 硬件开发者的新助手 作为一名电子工程师,你是否经常在Proteus仿真中遇到各种头疼的问题?元器件选型拿不准、电路连接总是报错、仿真参数设置不合理...这些看似小问题往往能消耗…...
免费开源分屏神器:Nucleus Co-Op如何让单人游戏秒变多人派对
免费开源分屏神器:Nucleus Co-Op如何让单人游戏秒变多人派对 【免费下载链接】nucleuscoop Starts multiple instances of a game for split-screen multiplayer gaming! 项目地址: https://gitcode.com/gh_mirrors/nu/nucleuscoop 你是否曾经遇到过这样的尴…...
使用VMware虚拟机部署FireRedASR-AED-L开发环境
使用VMware虚拟机部署FireRedASR-AED-L开发环境 1. 环境准备与系统安装 在开始部署FireRedASR-AED-L之前,我们需要先准备好VMware虚拟机和合适的操作系统环境。FireRedASR-AED-L是一个工业级的语音识别模型,对计算资源有一定要求,特别是GPU…...
造相Z-Image文生图模型v2快速上手:从部署到出图只需3步
造相Z-Image文生图模型v2快速上手:从部署到出图只需3步 1. 为什么选择Z-Image文生图模型 如果你正在寻找一款能在消费级显卡上运行的高质量文生图模型,Z-Image v2绝对值得考虑。作为阿里通义万相团队开源的最新作品,这个20亿参数的模型在24…...
CHORD-X代码生成能力展示:根据研报结论自动输出数据分析脚本
CHORD-X代码生成能力展示:根据研报结论自动输出数据分析脚本 最近在试用一个挺有意思的模型,叫CHORD-X。大家可能知道它在文本生成、对话方面挺强的,但我发现它还有个隐藏技能,或者说一个特别实用的能力延伸——它能看懂你写的分…...
Mac新手必看:用Homebrew一键搞定Qt开发环境(含Qt Creator配置)
Mac新手必看:用Homebrew一键搞定Qt开发环境(含Qt Creator配置) 刚拿到Mac准备开发Qt应用时,面对终端命令和路径配置总让人望而生畏。作为过来人,我完全理解这种忐忑——既想快速上手,又怕操作失误导致环境崩…...
