vue3制作类微信的六位的密码输入框

这是一个 Vue 3 组件,用于创建一个自定义的密码输入框。这个输入框由6个小输入框组成,每个小输入框只能输入一个字符。当用户在一个小输入框中输入字符后,焦点会自动跳到下一个输入框,直到所有6个输入框都填满为止。当6个字符都输入完成后,会触发一个名为 'input-complete' 的自定义事件,并将输入的密码作为参数传递出去。

下面是代码的详细解释:

模板部分 (<template>)

  • <div class="password-input">: 包裹所有输入框的容器。

  • <input v-for="(item, index) in Array.from({ length: 6 })" :key="index" ref="inputs" v-model="passwords[index]" @input="onInput(index, $event)" maxlength="1" type="password" />: 使用 v-for 指令创建6个输入框。每个输入框绑定到 passwords 数组的一个元素上,并通过 @input 监听输入事件。

    • v-for="(item, index) in Array.from({ length: 6 })": 循环6次以创建6个输入框。
    • :key="index": 为每个输入框设置一个唯一的 key。
    • ref="inputs": 为所有输入框设置一个引用。
    • v-model="passwords[index]": 双向绑定到 passwords 数组的一个元素上。
    • @input="onInput(index, $event)": 当输入框的值改变时,调用 onInput 函数。
    • maxlength="1": 限制每个输入框只能输入一个字符。
    • type="password": 设置输入框类型为密码,这样输入的字符会被遮挡。

脚本部分 (<script setup>)

  • import { ref, onMounted, watch } from 'vue';: 从 Vue 3 中导入所需的函数和API。
  • const passwords = ref(Array(6).fill(''));: 创建一个响应式引用 passwords,初始化为一个包含6个空字符串的数组。
  • function onInput(index, event) {...}: 定义一个函数,当输入框的值改变时被调用。如果当前输入框不是最后一个(索引小于5),则使当前输入框失去焦点,并在下一个可用的输入框上设置焦点。
  • onMounted(() => {...}): 在组件挂载完成后执行一些操作。这里使用 watch 函数来监听 passwords 引用的变化。当 passwords 的值改变时,检查密码的长度是否达到6个字符,如果是,则触发 'input-complete' 事件。

样式部分 (<style scoped>)

  • .password-input input: 为 .password-input 类下的所有 input 元素设置样式。这里设置了宽度、高度、文本对齐方式和外边距。
  • scoped: 这个属性意味着这些样式只适用于当前组件,不会影响其他组件或全局样式
<template><div class="password-input"><input v-for="(item, index) in Array.from({ length: 6 })" :key="index"ref="inputs" v-model="passwords[index]" @input="onInput(index, $event)" maxlength="1" type="password" /></div>
</template><script setup>
import { ref, onMounted, watch } from 'vue';const passwords = ref(Array(6).fill(''));function onInput(index, event) {const input = event.target;if (!input.value) return;if (index < 5) {input.blur();setTimeout(() => {const nextIndex = index + 1;const nextInput = input.nextElementSibling;if (nextInput) nextInput.focus();}, 0);}
}onMounted(() => {watch(passwords, (newVal) => {const password = newVal.join('');if (password.length === 6) {// 触发密码输入完成事件,传递密码值emit('input-complete', password);}});
});
</script><style scoped>
.password-input input {width: 40px;height: 40px;text-align: center;margin: 0 5px;
}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/223266.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Scrapy的crawlspider爬虫

scrapy的crawlspider爬虫 学习目标&#xff1a; 了解 crawlspider的作用应用 crawlspider爬虫创建的方法应用 crawlspider中rules的使用 1、crawlspider是什么 回顾之前的代码中&#xff0c;我们有很大一部分时间在寻找下一页的url地址或者是内容的url地址上面&#xff0c;这…

Web安全-SQL注入常用函数(二)

★★实战前置声明★★ 文章中涉及的程序(方法)可能带有攻击性&#xff0c;仅供安全研究与学习之用&#xff0c;读者将其信息做其他用途&#xff0c;由用户承担全部法律及连带责任&#xff0c;文章作者不承担任何法律及连带责任。 1、MySQL数据库构成 初始化安装MySQL数据库后(…

智能优化算法应用:基于模拟退火算法3D无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用&#xff1a;基于模拟退火算法3D无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用&#xff1a;基于模拟退火算法3D无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.模拟退火算法4.实验参数设定5.算法结果6.…

Android---Kotlin 学习007

集合可以方便你处理一组数据&#xff0c;也可以作为值参传给函数&#xff0c;和我们学过的其它变量类型一样&#xff0c;List、Set 和 Map 类型的变量也分为两类&#xff0c;只读和可变。 List创建与元素获取 通过 listOf() 函数创建一个 List 集合。 val listString : List&…

javaWeb文件上传

1.文件上传的应用场景&#xff1a;提交作业 上传头像 提交简历&#xff08;上传附件&#xff09; 上传商品&#xff0c;图书图片 2.文件上传的前台如何编写以及注意事项&#xff1a; 1.肯定需要用到表单 2.文件上传的那一栏需要提供 input的typefil…

UnicodeUtil.java

计算精度问题带根号√ √ UNICODE字符表 package util;import java.util.regex.Matcher; import java.util.regex.Pattern;/*** radical* 根号√运算问题 Unicode * * author ZengWenFeng* email 117791303qq.com* date 2015.04.07*/ public class UnicodeUtil {/*** 字…

ShardingSphere数据分片之读写分离

1、概述 读写分离是一种常见的数据库架构&#xff0c;它将数据库分为主从库&#xff0c;一个主库&#xff08;Master&#xff09;用于写数据&#xff0c;多个从库&#xff08;Slave&#xff09;进行轮询读取数据的过程。主从库之间通过某种通讯机制进行数据的同步。 所以&…

React Native android环境搭建,使用夜神模拟器进行开发(适用于0.73+版本)

前言 本文基于&#xff1a;“react-native” : “^0.73.0” 1.安装 Node Node.js&#xff0c;下载时选择 > 18 版本 2.下载并安装 JDK Java SE Development Kit (JDK)&#xff0c;下载时选择 17 版本 安装 验证是否安装成功 打开命令提示符输入 javac -version 回车 3.…

re:Invent 产品体验与感受分享:Amazon ElastiCache Serverless 缓存的即时扩展

授权说明&#xff1a;本篇文章授权活动官方亚马逊云科技文章转发、改写权&#xff0c;包括不限于在亚马逊云科技开发者社区、 知乎、自媒体平台、第三方开发者媒体等亚马逊云科技官方渠道&#xff09;。 文章目录 前言产品介绍产品使用步骤1.创建缓存服务2.安全组开放访问权限…

【Python】解读a+=b 和 a=a+b是否一样?看完恍然大悟!

文章目录 前言一、可变对象和不可变对象总结 前言 在Python中&#xff0c;对于可变和不可变对象的行为差异是一个重要概念&#xff0c;特别是在涉及到和操作时。理解这一点对于编写高效且无误的代码至关重要。 一、可变对象和不可变对象 首先&#xff0c;让我们谈谈可变和不可…

【INTEL(ALTERA)】 quartus使用Nios® V 处理器系统仿真失败,没有打印输出消息

说明 在 Synopsys* VCS* 和 VCS* MX 仿真器中模拟由以下位置生成的 Nios V 处理器系统时&#xff0c;可能会出现该问题&#xff1a; 英特尔 Quartus Prime Pro Edition 软件版本 23.1 至 23.4&#xff0c;或 英特尔 Quartus Prime Standard Edition 软件版本 23.1std 这是由…

位运算技巧

获取某个10进制数值的二进制最高位 public class Main {public static void main(String[] args) {// 调用 highBit 函数&#xff0c;传入参数 67int result highBit(67);// 输出结果的二进制表示System.out.println(Integer.toBinaryString(result)); // 输出 1000000}/***…

打工人副业变现秘籍,某多/某手变现底层引擎-Stable Diffusion替换背景

在Stable Diffusion软件中,使用ControlNet+模型实现固定物体批量替换背景 出图的流程。 一、准备好图片 1.你需要准备好一些白底图或者透明底图用于训练模型。 2.你需要准备同样角度的其他背景色底图用于ControlNet勾线 3.注意检查你的图片尺寸,是否为1:1,…

离散型随机变量的分布律(也称概率质量函数:probability mass function, PMF)

设是一个离散型随机变量&#xff0c;可能的取值为&#xff0c;取各个值的概率记为&#xff1a; &#xff08;1&#xff09; 其中 并且&#xff0c; 公式&#xff08;1&#xff09;就称为离散型随机变量的分布律&#xff0c;也称概率质量函数&#xff1a;probability ma…

svn使用步骤

服务器端主要用来创建仓库&#xff0c;然后供客户端去访问与下载。 客户端&#xff1a; 图形化界面的使用&#xff1a;这里使用的是tortoise工具 1.创建一个文件夹作为自己的本地仓库目录 2.鼠标右键文件夹&#xff0c;在菜单中点击SVN checkout 3.找个图 这一步骤相当于git中…

最新版xposed编写教程

环境&#xff1a; andriod studio2023.1.1 jdk17 gradle8.2 流程&#xff1a; 1.新建项目&#xff0c;选empty views activity即可&#xff08;其他也可&#xff09; 2.语言选java&#xff0c;其他路径名称等暗战自己需要随便改&#xff0c;然后点击finish 3.修改AndroidMan…

调用接口 Promise.all的简单使用方式

created() {const requests [axios.get(/api/data1),axios.get(/api/data2),axios.get(/api/data3)];Promise.all(requests).then(responses > {// 处理响应数据const data1 responses[0].data;const data2 responses[1].data;const data3 responses[2].data;// ...}).c…

茶室茶楼计时计费软件,软件中的商品管理计时操作教程

一、前言 茶室在营业的时候&#xff0c;不但需要计时间&#xff0c;同时还需要管理商品入库出库库存等管理。这就需要一款实用的操作简单的管理软件。 下面以 佳易王茶社计时计费软件V18.0为例说明&#xff0c;其他版本可以参考本教程。 软件下载或技术支持可以点击最下方官…

【Python基础】线程

文章目录 [toc]线程与进程的区别与联系同步任务示例 并发任务示例 线程方法thread_object.start()thread_object.join()thread_object.setDaemon()thread_object.current_thread() 线程与进程的区别与联系 线程是可以被计算机CPU调度的最小单元进程是计算机分配资源&#xff0…

和利时DCS数据采集

在工业自动化领域&#xff0c;和利时DCS&#xff08;分布式控制系统&#xff09;被广泛应用&#xff0c;它对于工厂的生产过程和设备管理起到了重要的作用。然而&#xff0c;对于和利时DCS数据的采集&#xff0c;很多工厂面临着一些难点。本文将介绍和利时DCS的概述&#xff0c…