微信小程序实现联动删除输入验证码框
以下是json代码
{"component": true,"usingComponents": {}
}
以下是wxml代码
<van-popup show="{{ show }}" bind:close="onClose" custom-class="extract"><image src="../../images/extract/icon1.png" mode=""/><view class="title">请输入验证码</view><view class="ys-verification"><view class="input-wrapper" wx:for="{{amount}}" wx:key="index"><input type="number" value="{{code[index]}}" data-index="{{item}}" title="code" focus="{{item == currentIndex}}" maxlength="1" data-index="{{index}}" bindinput='handleInput'/></view></view><view class="tips">请输入验证码</view><view class="btn">提交</view>
</van-popup>
以下是css代码
.ys-verification {width: 100%;height: 100rpx;display: flex;justify-content: space-around;margin-top: 34rpx;padding-top: 48rpx;margin-bottom: 24rpx;border-top: 2rpx solid #FFFFFF;
}
.ys-verification .input-wrapper {width: 102rpx;height: 100rpx;background: #FFFFFF;border-radius: 8rpx;position: relative;
}
.ys-verification input {position: absolute;width: 100%;height: 100%;text-align: center;font-size: 50rpx;color: #333;background: #fff;
}
.extract {width: 622rpx;height: 490rpx;background: linear-gradient(135deg, #E1FFFB 0%, #FFE6E6 100%);border-radius: 8rpx;padding: 32rpx;position: relative;
}
.extract > image {position: absolute;width: 36rpx;height: 36rpx;top: 36rpx;right: 36rpx;
}
.extract .title {font-size: 32rpx;color: #41475B;text-align: center;
}
.extract .tips {font-size: 28rpx;color: #41475B;text-align: center;
}
.extract .btn {width: 304rpx;height: 84rpx;text-align: center;line-height: 84rpx;background: #05C8AF;border-radius: 12rpx ;font-size: 28rpx;color: #FFFFFF;margin: 48rpx auto 0;
}
以下是js逻辑代码
Component({/*** 组件的属性列表*/properties: {},/*** 组件的初始数据*/data: {show:1,code:[],currentIndex:0,amount:4},/*** 组件的方法列表*/methods: {onClose(e){
this.setData({show:0
});},handleInput(e){let value = this.validateNumber(e.detail.value);let index = e.currentTarget.dataset.index;const oldValue = this.data.code[index];if(value!==''){let code = this.data.code;code[index] = value;this.setData({code,currentIndex: ++index});if(!code.includes('')){this.triggerEvent('onCompleted',{code: code.join('')},{bubbles: true,composed: true})}}else{const isDeleted = oldValue !== ''; // 但是无法监听当value为''的情况,因为不会触发input事件-->let code = this.data.code;code[index] = '';this.setData({code,currentIndex: isDeleted?--index:index})}},validateNumber(val) {return val.replace(/\D/g, '')},},attached() {}
})
相关文章:
微信小程序实现联动删除输入验证码框
以下是json代码 {"component": true,"usingComponents": {} }以下是wxml代码 <van-popup show"{{ show }}" bind:close"onClose" custom-class"extract"><image src"../../images/extract/icon1.png"…...
数据库中decimal、float 和 double区别
在计算机科学中,decimal、float 和 double 是用于表示和处理数值的不同数据类型。 - decimal 是一种精确的十进制浮点数表示,通常用于需要高精度计算的场景,比如财务应用。它能够精确表示小数,并且不会出现浮点数运算误差。 - flo…...
网络编程01
1. 概念 通过网络,让两个主机之间能够进行通信,基于这样的通信完成一定的功能 只要满足进程不同即可,即使是同一个主机,只要是不同的进程,基于网络完成编程 进行网络编程时,需要操作系统提供一组API&…...
el-dialog修改其样式不生效加deep也没用
场景 el-dialog标签直接写在了template下。 解决方法 在template中先写一层div,包裹住el-dialog。...
三天精通一算法之快速排序
力扣链接912. 排序数组 - 力扣(LeetCode)注意这题快排不能用递归,否则堆会爆 快速排序(Quicksort)是一种高效的排序算法,通常使用分治法来将一个列表分成较小的子列表,然后递归地排序这些子列表…...
互联网、物联网的相关标准
互联网的相关标准 网络通信协议: HTTP(Hypertext Transfer Protocol):用于在网络中传输文本、图像、音频和视频等数据的协议。它基于请求-响应模型,客户端发送请求给服务器,服务器返回响应。HTTPS&a…...
Linux题库及答案
填空题 1. 建立用户账号的命令是__useradd________。 2. 修改账号密码的命令是__passwd________。 3. 更改用户密码过期信息的命令是__chage________。 4. 创建一个新组的命令是___groupadd_______。 5. 用于在不注销的情况下切换到系统中的另一个用户的命令是___su_…...
Android 镜像模式和扩展模式区别探讨-Android14
Android 镜像模式和扩展模式区别探讨 1、区分镜像模式和扩展模式1.1 扩展屏是否有显示内容1.2 镜像模式显示条件 2、镜像模式界面 同屏显示和异屏显示探讨DisplayManagerService启动及主屏添加-Android13 Android主副屏显示-Android14 1、区分镜像模式和扩展模式 LogicalDispla…...
深度学习笔记之BERT(五)TinyBERT
深度学习笔记之TinyBERT 引言回顾:DistilBERT模型TinyBERT模型结构TinyBERT模型策略Transformer层蒸馏嵌入层蒸馏预测层蒸馏 TinyBERT模型的训练效果展示 引言 上一节介绍了 DistilBERT \text{DistilBERT} DistilBERT模型,本节将继续介绍优化性更强的知…...
【时间序列预测】基于PyTorch实现CNN_BiLSTM算法
文章目录 1. CNN与BiLSTM2. 完整代码实现3. 代码结构解读3.1 CNN Layer3.2 BiLSTM Layer3.3 Output Layer3.4 forward Layer 4. 应用场景5. 总结 本文将详细介绍如何使用Pytorch实现一个结合卷积神经网络(CNN)和双向长短期记忆网络(BiLSTM&am…...
联想Y7000 2024版本笔记本 RTX4060安装ubuntu22.04双系统及深度学习环境配置
目录 1..制作启动盘 2.Windows 磁盘分区,删除原来ubuntu的启动项 3.四个设置 4.安装ubuntu 5.ubuntu系统配置 1..制作启动盘 先下载镜像文件,注意版本对应。Rufus - 轻松创建 USB 启动盘 用rufus制作时,需要注意选择正确的分区类型和系统类型。不然安装的系统会有问题…...
VuePress学习
1.介绍 VuePress 由两部分组成:第一部分是一个极简静态网站生成器 (opens new window),它包含由 Vue 驱动的主题系统和插件 API,另一个部分是为书写技术文档而优化的默认主题,它的诞生初衷是为了支持 Vue 及其子项目的文档需求。…...
一次“okhttp访问间隔60秒,提示unexpected end of stream“的问题排查过程
一、现象 okhttp调用某个服务,如果第二次访问间隔上一次访问时间超过60s,返回错误:"unexpected end of stream"。 二、最终定位原因: 空闲连接如果超过60秒,服务端会主动关闭连接。此时客户端恰巧访问了这…...
SQL最佳实践:避免使用COUNT=0
如果你遇到类似下面的 SQL 查询: SELECT * FROM customer c WHERE 0 (SELECT COUNT(*)FROM orders oWHERE o.customer_id c.customer_id);意味着有人没有遵循 SQL 最佳实践。该语句的作用是查找没有下过订单的客户,其中子查询使用了 COUNT 函数统计客…...
PG与ORACLE的差距
首先必须是XID 64,一个在极端环境下会FREEZE的数据库无论如何都无法承担关键业务系统的重任的,我们可以通过各种配置,提升硬件的性能,通过各种IT管控措施来尽可能避免在核心系统上面临FREEZE的风险,不过并不是每个企业…...
树莓派3B+驱动开发(2)- LED驱动(传统模式)
github主页:https://github.com/snqx-lqh 本项目github地址:https://github.com/snqx-lqh/RaspberryPiDriver 本项目硬件地址:https://oshwhub.com/from_zero/shu-mei-pai-kuo-zhan-ban 欢迎交流 笔记说明 如我在驱动开发总览中说的那样&…...
超详细搭建PhpStorm+PhpStudy开发环境
刚开始接触PHP开发,搭建开发环境是第一步,网上下载PhpStorm和PhpStudy软件,怎样安装和激活就不详细说了,我们重点来看一看怎样搭配这两个开发环境。 前提:现在假设你已经安装完PhpStorm和PhpStudy软件。 我的PhpStor…...
分析比对vuex和store模式
在 Vue 中,Vuex 和 store 模式 是两个不同的概念,它们紧密相关,主要用于管理应用的状态。下面我会详细介绍这两个概念,并通过例子帮助你更好地理解。 1. Vuex 是什么? Vuex 是 Vue.js 的一个状态管理库,用…...
C# 网络编程--基础核心内容
在现今软件开发中,网络编程是非常重要的一部分,本文简要介绍下网络编程的概念和实践。 C#网络编程的主要内容包括以下几个方面: : 上图引用大佬的图,大家也关注一下,有技术有品质,有国有家,情…...
【C++游戏程序】easyX图形库还原游戏《贪吃蛇大作战》(三)
承接上一篇文章:【C游戏程序】easyX图形库还原游戏《贪吃蛇大作战》(二),我们这次来补充一些游戏细节,以及增加吃食物加长角色长度等设定玩法,也是本游戏的最后一篇文章。 一.玩家边界检测 首先是用来检测…...
Cursor-Learner:基于编辑器历史数据,自动生成个性化AI编程助手Prompt
1. 项目概述:一个帮你“诊断”编程习惯的智能助手 如果你和我一样,每天都在和 Cursor 或 WindSurf 这类 AI 驱动的代码编辑器打交道,那你肯定也遇到过这样的困惑:为什么有时候 AI 助手能精准地理解你的意图,写出漂亮的…...
告别驱动开发:手把手教你用himm工具在用户空间玩转Hi3516的GPIO
用户空间高效操控Hi3516 GPIO:himm工具实战指南 在嵌入式开发领域,传统的内核驱动开发往往需要经历漫长的编译、加载和调试周期。对于快速硬件验证和原型开发而言,这种开发模式显得过于笨重。海思Hi3516平台提供的himm工具,为开发…...
3分钟掌握B站缓存视频转换:m4s-converter终极使用指南
3分钟掌握B站缓存视频转换:m4s-converter终极使用指南 【免费下载链接】m4s-converter 一个跨平台小工具,将bilibili缓存的m4s格式音视频文件合并成mp4 项目地址: https://gitcode.com/gh_mirrors/m4/m4s-converter 你是否曾经遇到过这样的困扰&a…...
9 款 AI 写论文哪个好?2026 深度实测|虎贲等考 AI 凭真文献 + 真实图表 + 全流程实证,稳坐毕业论文首选
毕业季高频提问:9 款 AI 写论文哪个好?市面上工具看似大同小异,实则在文献真实性、实证图表、全流程覆盖、学术合规上差距巨大。通用大模型文献造假、普通工具无实证能力、小众平台功能残缺,选错轻则反复改稿,重则查重…...
【机器学习】Stacking模型融合:从原理到实战的进阶指南
1. 为什么需要Stacking模型融合? 当你用单一模型处理复杂数据时,经常会遇到这样的困境:线性回归对非线性关系束手无策,决策树容易过拟合,神经网络需要大量调参。我在去年参加Kaggle房价预测比赛时就深有体会——当时用…...
哪个降AI软件好?2026年4款主流降AI工具按场景对位横评!
哪个降AI软件好?2026年4款主流降AI工具按场景对位横评! 「哪个降 AI 软件好」没有标准答案。学生最常踩的坑是把这个问题简化成「哪款最便宜」或者「哪款最有效」——其实好不好用看你的场景。学校送知网严标准、送维普重灾区、自媒体被判 AI、本科双重问…...
OpenClaw 汉化版 Windows 一键安装指南|零基础 5 分钟部署 告别命令行
前言 在本地部署 AI 智能体时,英文界面晦涩、命令行操作复杂、环境配置繁琐,是很多零基础用户的三大痛点。OpenClaw 汉化中文版专为国内用户优化,采用全中文图形化界面 免环境配置 一键部署设计,全程无任何命令行操作ÿ…...
SkillForge:构建可复用技能模块的标准化框架与实践指南
1. 项目概述与核心价值 最近在开源社区里,一个名为 SkillForge 的项目引起了我的注意。它的仓库地址是 kographh/skillforge ,这个名字本身就很有意思——“技能锻造”。作为一名长期在技术一线摸爬滚打的开发者,我见过太多号称能“提升效…...
Hello-Agents 实战指南 —— 从零开始构建你的第一个 AI 智能体
“如何从零构建一个 AI 智能体?” 这是很多开发者入门 Agent 开发时面临的第一个难题。市面上的框架层出不穷,但大多依赖复杂的封装与配置,初学者往往在环境搭建阶段就望而却步。Hello-Agents 项目的出现,打破了这一壁垒。作为面向…...
从IEEE 1588到EtherCAT DC:深入对比两种工业网络时间同步协议的核心差异与应用选型
工业网络时间同步技术深度解析:EtherCAT DC与IEEE 1588的实战选型指南 在智能制造和自动化控制领域,毫秒级的响应时间早已成为过去式。现代工业网络对时间同步精度的要求已经进入纳秒时代——这相当于光在真空中仅能传播30厘米的时间跨度。当多个伺服电…...
