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

【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组件&#xff0c;显示了一个Antd Table组件&#xff0c;设置了一个columns变量并复制给Table的columns属性&#xff0c;由于我们请求的datasource来源是异步的&#xff0c;示例伪代码如下&#xff1a; const [columns, setColumns] useState([]); /…...

ChatGPT的图识别来了

前几天ChatGPT推出了Dall-E 3功能&#xff0c;可以根据文字和描述一段话来生成一个或者一组图。 这次又来重磅了&#xff0c;图识别又来了&#xff01;换句话说&#xff0c;也即是文生图&#xff0c;图生文都可以实现了&#xff0c;一起来试试 1、解释图中的意思 &#xff0…...

java Stream编程笔记

文章目录 Stream介绍什么是 Stream&#xff1f; Stream中间操作过滤操作&#xff08;filter&#xff09;映射操作&#xff08;map&#xff09;排序操作&#xff08;sorted&#xff09;截断操作&#xff08;limit 和 skip&#xff09; Stream 的终止操作forEach 和 peek聚合操作…...

顶顶通语音识别使用说明

介绍 顶顶通语音识别软件(asrproxy)是一个对接了多种语音识别接口的语音识别系统。可私有化部署(支持中文英文和方言等&#xff0c;支持一句话识别、实时流识别、多声道录音文件识别。 原理 asrproxy内嵌了阿里达摩院的开源语音识别工具包FunASR,后续我们也会使用自有的预料…...

重磅发布 OpenAI 推出用户自定义版 ChatGPT

文章目录 重磅发布 OpenAI 推出用户自定义版 ChatGPT个人简介 重磅发布 OpenAI 推出用户自定义版 ChatGPT OpenAI 首届开发者大会 (OpenAI DevDay) 于北京时间 11 月 7 日凌晨 02:00 开始&#xff0c;大会上宣布了一系列平台更新。其中一个重要更新是用户可以创建他们自己的自定…...

Java 幼儿园(20231111)读取 json 文件

1、功能场景 &#xff08;1&#xff09;多人合作开发一个功能模块时&#xff0c;需要调用外部接口 &#xff08;2&#xff09;对方接口的开发工作还没有完成&#xff0c;只能提供一个返回值的示例文件 json 文件。 &#xff08;3&#xff09;返回的 json 数据多达几百个字段。 …...

云计算、大数据技术的智慧工地,实现对建筑工地实时监测、管理和控制的一种新型建筑管理方式

智慧工地是利用物联网、云计算、大数据等技术&#xff0c;实现对建筑工地实时监测、管理和控制的一种新型建筑管理方式。 智慧工地架构&#xff1a; 1、终端层&#xff1a; 充分利用物联网技术、移动应用、智能硬件设备提高现场管控能力。通过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 &#x1f4df;作者主页&#xff1a;慢热的陕西人 &#x1f334;专栏链接&#xff1a;Linux &#x1f4e3;欢迎各位大佬&#x1f44d;点赞&#x1f525;关注&#x1f693;收藏&#xff0c;&#x1f349;留言 本博客主要内容在Linux环境下&#xff…...

亚马逊云AI应用科技创新下的Amazon SageMaker使用教程

目录 Amazon SageMaker简介 Amazon SageMaker在控制台的使用 模型的各项参数 pytorch训练绘图部分代码 Amazon SageMaker简介 亚马逊SageMaker是一种完全托管的机器学习服务。借助 SageMaker&#xff0c;数据科学家和开发人员可以快速、轻松地构建和训练机器学习模型&#…...

Eigen:旋转向量(Angle-Axis)转换为四元素和旋转矩阵

0. 在固定欧拉角系下。 绕固定系旋转&#xff0c;旋转的先后顺序为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#通过泛型来促进代码重用&#xff0c;在词义上等价于C模板。 在泛型编程中&#xff0c;数据类型也是一种参数。 12.1如果C#没有泛型 为object的方法使用值类型时&#xff0c;“运行时”将自动对它进行装箱&#xff0c;获取值类型的实例时则需要…...

Python与ArcGIS系列(七)自动化打印地图

目录 0 简述1 获取可用打印机列表2 打印地图3 导出地图至PDF4 导出地图至图像0 简述 本篇介绍如何利用arcpy实现获取可用打印机列表、打印地图、导出地图至PDF和图像。 1 获取可用打印机列表 通过arcpy提供的ListPrinterNames()函数可以生成可用的打印机列表。 import arcpy.m…...

基于STM32单片机抢答器设计

**单片机设计介绍&#xff0c; 基于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&#xff1a;2.PersistentStateComponent&#xff1a;3.Project Settings&#xff1a;4.外部文件&#xff1a; 5.数据库&#xff1a;6.加密数据&#xff1a;7,自定义配置文件…...

Vscode禁止插件自动更新

由于电脑的vscode版本不是很新。2022.10月份的版本1.7.2&#xff0c;电脑vscode的python插件装的也是2022年4月份的某个版本&#xff0c;但插件经常自动更新&#xff0c;导致python代码无法Debug,解决办法&#xff1a; 点设置&#xff0c;搜autoUpdate, 把红色框选成无...

Zookeeper篇---第六篇

系列文章目录 文章目录 系列文章目录一、请简述Zookeeper的选主流程二、为什么Zookeeper集群的数目,一般为奇数个?三、知道Zookeeper监听器的原理吗?一、请简述Zookeeper的选主流程 Zookeeper的核心是原子广播,这个机制保证了各个Server之间的同步。实现这个机制的协议叫做…...

mysql数据库存储过程之游标(光标cursor)

游标是用来存储查询结果集的数据类型&#xff0c;在存储过程和函数中可以使用游标对结果集进行循环的处理。游标的使用包括游标的声明、open、fetch和close。 一、语法。 #声明游标 declare 游标名称 cursor for 查询语句; #开启游标 open 游标名称; #获取游标记录 fetch 游标…...

【大模型RAG】拍照搜题技术架构速览:三层管道、两级检索、兜底大模型

摘要 拍照搜题系统采用“三层管道&#xff08;多模态 OCR → 语义检索 → 答案渲染&#xff09;、两级检索&#xff08;倒排 BM25 向量 HNSW&#xff09;并以大语言模型兜底”的整体框架&#xff1a; 多模态 OCR 层 将题目图片经过超分、去噪、倾斜校正后&#xff0c;分别用…...

微信小程序之bind和catch

这两个呢&#xff0c;都是绑定事件用的&#xff0c;具体使用有些小区别。 官方文档&#xff1a; 事件冒泡处理不同 bind&#xff1a;绑定的事件会向上冒泡&#xff0c;即触发当前组件的事件后&#xff0c;还会继续触发父组件的相同事件。例如&#xff0c;有一个子视图绑定了b…...

深入浅出:JavaScript 中的 `window.crypto.getRandomValues()` 方法

深入浅出&#xff1a;JavaScript 中的 window.crypto.getRandomValues() 方法 在现代 Web 开发中&#xff0c;随机数的生成看似简单&#xff0c;却隐藏着许多玄机。无论是生成密码、加密密钥&#xff0c;还是创建安全令牌&#xff0c;随机数的质量直接关系到系统的安全性。Jav…...

基于Flask实现的医疗保险欺诈识别监测模型

基于Flask实现的医疗保险欺诈识别监测模型 项目截图 项目简介 社会医疗保险是国家通过立法形式强制实施&#xff0c;由雇主和个人按一定比例缴纳保险费&#xff0c;建立社会医疗保险基金&#xff0c;支付雇员医疗费用的一种医疗保险制度&#xff0c; 它是促进社会文明和进步的…...

ESP32读取DHT11温湿度数据

芯片&#xff1a;ESP32 环境&#xff1a;Arduino 一、安装DHT11传感器库 红框的库&#xff0c;别安装错了 二、代码 注意&#xff0c;DATA口要连接在D15上 #include "DHT.h" // 包含DHT库#define DHTPIN 15 // 定义DHT11数据引脚连接到ESP32的GPIO15 #define D…...

基于当前项目通过npm包形式暴露公共组件

1.package.sjon文件配置 其中xh-flowable就是暴露出去的npm包名 2.创建tpyes文件夹&#xff0c;并新增内容 3.创建package文件夹...

【SQL学习笔记1】增删改查+多表连接全解析(内附SQL免费在线练习工具)

可以使用Sqliteviz这个网站免费编写sql语句&#xff0c;它能够让用户直接在浏览器内练习SQL的语法&#xff0c;不需要安装任何软件。 链接如下&#xff1a; sqliteviz 注意&#xff1a; 在转写SQL语法时&#xff0c;关键字之间有一个特定的顺序&#xff0c;这个顺序会影响到…...

React19源码系列之 事件插件系统

事件类别 事件类型 定义 文档 Event Event 接口表示在 EventTarget 上出现的事件。 Event - Web API | MDN UIEvent UIEvent 接口表示简单的用户界面事件。 UIEvent - Web API | MDN KeyboardEvent KeyboardEvent 对象描述了用户与键盘的交互。 KeyboardEvent - Web…...

【服务器压力测试】本地PC电脑作为服务器运行时出现卡顿和资源紧张(Windows/Linux)

要让本地PC电脑作为服务器运行时出现卡顿和资源紧张的情况&#xff0c;可以通过以下几种方式模拟或触发&#xff1a; 1. 增加CPU负载 运行大量计算密集型任务&#xff0c;例如&#xff1a; 使用多线程循环执行复杂计算&#xff08;如数学运算、加密解密等&#xff09;。运行图…...

mysql已经安装,但是通过rpm -q 没有找mysql相关的已安装包

文章目录 现象&#xff1a;mysql已经安装&#xff0c;但是通过rpm -q 没有找mysql相关的已安装包遇到 rpm 命令找不到已经安装的 MySQL 包时&#xff0c;可能是因为以下几个原因&#xff1a;1.MySQL 不是通过 RPM 包安装的2.RPM 数据库损坏3.使用了不同的包名或路径4.使用其他包…...