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

vue封装独立组件:实现分格密码输入框/验证码输入框

目录

第一章 实现效果

第二章 核心实现思路

第三章 封装组件代码实现

第一章 实现效果

  •  为了方便小编的父组件随便找了个页面演示的
  • 通过点击按钮,展示子组件密码输入的输入框
  • 通过点击子组件输入框获取焦点,然后输入验证码数字即可
  • 子组件的确定按钮是验证输入的验证码是否正确
  • 用到的工具:element-ui组件 + 原生Html + Css(当然用别的组件/原生input也可,实现思路大同小异)

第二章 核心实现思路

  • 看图了解需求:我们需要6个单元格,但是单元格没有输入功能,想到input元素,但是我们如果每一个单元格代表一个input,又比较繁琐,而且还需要修改input的样式
  • 小编的实现思路:

        -- 制作6个小的正方形div,当做每一个input输入的单元格

        -- 使用一个input元素即可,将其覆盖在6个div上,这样就不需要6个input框了

        -- 然后给input设置透明(隐藏掉input),就相当于在input框输入数字,只是看不到

        -- 最后将输入的每一个值对应到6个div的格子上即可

第三章 封装组件代码实现

  • 父组件
<template><div>// 使用自定义子组件<inputComponent ref="inputPsdComponent"></inputComponent></div>
</template><script>
// 引入自定义封装的子组件
import inputComponent from './component/inputComponent.vue'
export default {data () {return {}},components: {inputComponent // 祖册自定义子组件},methods: {showInput () {this.$refs.inputPsdComponent.init() // 调用子组件的init方法}},
}
</script>
  • 子组件:详细说明在代码中
<template><el-dialog :title="title" :visible.sync="visible"><div class="input_box flexbox"><!-- 单元格页面 --><div class="codes"><!-- 通过长度与获取焦点标签控制单元格是否高亮 --><divclass="code_item":class="codeValue.length == 0 && inputFocus ? 'code_item_active' : ''">{{ codeValue[0] }}</div><divclass="code_item":class="codeValue.length == 1 && inputFocus ? 'code_item_active' : ''">{{ codeValue[1] }}</div><divclass="code_item":class="codeValue.length == 2 && inputFocus ? 'code_item_active' : ''">{{ codeValue[2] }}</div><divclass="code_item":class="codeValue.length == 3 && inputFocus ? 'code_item_active' : ''">{{ codeValue[3] }}</div><divclass="code_item":class="codeValue.length == 4 && inputFocus ? 'code_item_active' : ''">{{ codeValue[4] }}</div><divclass="code_item":class="codeValue.length == 5 && inputFocus ? 'code_item_active' : ''">{{ codeValue[5] }}</div></div><!-- input框:控制长度 --><el-inputclass="input_code":value="codeValue":maxlength="6"@blur="codeInputBlur"@focus="codeInputFocus"@input="codeInputChange"></el-input><div class="btn"><el-button type="primary" @click="confirm">确定</el-button></div></div></el-dialog>
</template><script>
export default {data() {return {visible: false,inputFocus: false,codeValue: '',title: '密码输入'}},props:{},methods: {init () {this.visible = true},// 校验输入的验证码/密码confirm () {if (this.codeValue.length === 6) {this.$message({showClose: true,message: '验证成功!',type: 'success'})this.codeValue = ''this.visible = false} else {this.$message({showClose: true,message: '验证码不正确!',type: 'error'})}},// 验证码输入框codeInputChange (e) {// 判断是否输入值if (e) {// 正则判断是否都是数字,如果都是数字则赋值,否则if ((/^\+?[0-9][0-9]*$/).test(e)) {this.codeValue = e}} else {this.codeValue = ''}},// 验证码输入框失去焦点codeInputBlur () {this.inputFocus = false},// 验证码输入框获取到焦点codeInputFocus () {this.inputFocus = true},}
}
</script><style lang="less" scoped>
.input_box {margin-top: 20px;height: 100px;position: relative;}.input_code {position: absolute;top: 0;left: 0;}.btn{position: absolute;top: 70px;left: 0;}.codes{position: absolute;top: 0;display: flex;justify-content: flex-start;.code_item {width: 50px;height: 50px;text-align: center;line-height: 50px;border: 1px solid #f0f0f0;margin-right: 10px;}}.code_item_active {border: 1px solid #F23026 !important;// box-sizing: border-box;}// 隐藏input.input_box {::v-deep .el-input__inner {width: 100%;height: 50px !important;background-color: transparent;border: none;color: transparent;}}::v-deep .el-dialog {min-height: 100px;}
</style>

相关文章:

vue封装独立组件:实现分格密码输入框/验证码输入框

目录 第一章 实现效果 第二章 核心实现思路 第三章 封装组件代码实现 第一章 实现效果 为了方便小编的父组件随便找了个页面演示的通过点击按钮&#xff0c;展示子组件密码输入的输入框通过点击子组件输入框获取焦点&#xff0c;然后输入验证码数字即可子组件的确定按钮是验…...

从2D圆形到3D椭圆

要将一个2D圆形转换成3D椭圆&#xff0c;我们需要使用CSS的transform属性和一些基本的几何知识。首先&#xff0c;让我们创建一个HTML元素&#xff0c;如下所 html <div class"circle"></div> 然后&#xff0c;使用CSS样式将其转换成3D椭圆 css .circ…...

Linux CentOS7.9安装OpenJDK17

Linux CentOS7.9安装OpenJDK17 一、OpenJDK下载 清华大学开源软件镜像站 国内的站点&#xff0c;下载速度贼快 二、上传解压 文件上传到服务器后&#xff0c;解压命令&#xff1a; tar -zxvf jdk-xxxx-linux-x64.tar.gz三、配置环境 export JAVA_HOME/home/local/java/j…...

计算机网络第4章-网络层(1)

引子 网络层能够被分解为两个相互作用的部分&#xff1a; 数据平面和控制平面。 网络层概述 路由器具有截断的协议栈&#xff0c;即没有网络层以上的部分。 如下图所示&#xff0c;是一个简单网络&#xff1a; 转发和路由选择&#xff1a;数据平面和控制平面 网络层的作用…...

单元测试学习

回顾测试理论基础 单元测试基础知识 什么是单元测试 单元测试流程、测试计划 测试策略设计、实现 单元测试 - 执行 HTML 报告生成 1 软件测试分类 目标 回顾测试理论知识-测试分类 1. 测 试分类 代码可见度上-划分分类&#xff1a; 1. 黑盒测试 2. 灰盒测试 3. …...

python编写接口测试文档(以豆瓣搜索为例)

&#x1f4e2;专注于分享软件测试干货内容&#xff0c;欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f4dd; 如有错误敬请指正&#xff01;&#x1f4e2;交流讨论&#xff1a;欢迎加入我们一起学习&#xff01;&#x1f4e2;资源分享&#xff1a;耗时200小时精选的「软件测试」资…...

C++查看Class类结构

cl指令 cl test.cpp /d1reportSingleClassLayout 类名 注意。上面指令是d1,1是数字1 &#xff0c; 不是字母l;...

appium如何连接多台设备

我们在做app自动化的时候&#xff0c;若要考虑兼容性问题&#xff0c;需要跑几台设备&#xff0c;要是一台一台的跑比较耗时&#xff0c;因此需要考虑使用多线程来同时操作多台设备。 1.我们拿两台设备来模拟操作下&#xff0c;使用&#xff1a;adb devices查看连接状况&#…...

VUE el-form组件不绑定model时进行校验

在el-form中如果要使用:rules规则校验时,需要在el-form标签绑定 :model 如何不绑定model而进行校验字段: 思路: 1.假设规则为非空判断 2.获取该字段,进行非空判断,记录该字段是否校验完成,添加到校验标识中 3.表单或数据提交时,判断校验标识 required 红星星 :error 提示项 …...

计算机视觉的监督学习与无监督学习

什么是监督学习&#xff1f; 监督学习是一种机器学习算法&#xff0c;它从一组已标记的 合成数据生成器中生成的训练数据中学习。这意味着数据科学家已经用正确的标签&#xff08;例如&#xff0c;“猫”或“狗”&#xff09;标记了训练集中的每个数据点&#xff0c;以便算法可…...

Linux-lvds接口

lvds接口 单6 单8 双6 双8...

Android 自定义View一

1.继承已有VIew&#xff0c;改写尺寸&#xff1a;重写onMeasure SquareImageView 2.完全自定义重写onMeasure 3.自定义Layout 重写onMeasure onLayout 1.继承已有VIew&#xff0c;改写尺寸&#xff1a;重写onMeasure 流程&#xff1a; 重写onMeasure 用getmeasureedWidth …...

11、电路综合-集总参数电路结构的S参数模型计算与Matlab

11、电路综合-集总参数电路结构的S参数模型 电路综合专栏的大纲如下&#xff1a; 网络综合和简化实频理论学习概述 前面介绍了许多微带线电路综合的实际案例&#xff0c;如&#xff1a; 3、电路综合原理与实践—单双端口理想微带线&#xff08;伪&#xff09;手算S参数与时域…...

计算机网络--真题

因特网上专门用于传输文件的协议是 因特网上专门用于传输文件的协议通常是 FTP&#xff08;File Transfer Protocol&#xff09;。FTP 是一种标准的网络协议&#xff0c;用于在计算机之间传输文件。它允许用户在客户端和服务器之间传输文件&#xff0c;上传文件到服务器或从服务…...

java毕业设计基于ssm的招聘求职网站

项目介绍 本前途招聘求职网站是针对目前仓库的实际需求&#xff0c;从实际工作出发&#xff0c;对过去的前途招聘求职网站存在的问题进行分析&#xff0c;完善用户的使用体会。采用计算机系统来管理信息&#xff0c;取代人工管理模式&#xff0c;查询便利&#xff0c;信息准确…...

【JavaEE初阶】 初识网络原理

文章目录 &#x1f332;网络发展史&#x1f6a9;独立模式&#x1f6a9;网络互连&#x1f4cc;局域网LAN&#x1f388;基于网线直连&#x1f388;基于集线器组建&#x1f388;基于交换机组建&#x1f388;基于交换机和路由器组建 &#x1f4cc;广域网WAN &#x1f340;网络通信基…...

LeetCode题解:993. 二叉树的堂兄弟节点,BFS,JavaScript,详细注释

原题链接&#xff1a; https://leetcode.cn/problems/cousins-in-binary-tree/ 解题思路&#xff1a; 使用队列进行BFS搜索&#xff0c;同时保存每个节点&#xff0c;以及其深度和父节点信息。当搜索到x和y时&#xff0c;对比深度和父节点&#xff0c;如果满足要求&#xff0…...

在python中加载tensorflow-probability模块和numpy模块

目录 操作步骤&#xff1a; 注意&#xff1a; 问题&#xff1a; 解决办法&#xff1a; 操作步骤&#xff1a; 在虚拟环境的文件夹中&#xff0c;找到Scripts文件夹&#xff0c;点击进去&#xff0c;找到地址栏&#xff0c;在地址栏中输入cmd&#xff0c;进入如下界面。 输…...

t2017递推2猴子摘桃

2、猴子摘桃(nhoi2005xx1) Description 果园里种了很多桃树&#xff0c;当桃树开始结果的时候&#xff0c;猴子便会成群结队地前来摘桃。 猴子们第一天会摘掉桃子的一半还多一个&#xff0c;第二天再摘第一天剩下的一半还多一个&#xff0c;以后每天均摘掉上一天剩下的一半还…...

呼吸灯【FPGA】

晶振50Mhz 1us 等于 计0~49 1ms等于 0~999us 1s等于 0~999ms //led_outalways(posedge FPGA_CLK_50M_b5 or negedge reset_e8) //【死循环】敏感【触发条件&#xff1a;上升沿 clk】【运行副本】if(reset_e81b0)begin //50Mhz晶振&#xff0c; 49_999_999 是 1秒…...

深入浅出Asp.Net Core MVC应用开发系列-AspNetCore中的日志记录

ASP.NET Core 是一个跨平台的开源框架&#xff0c;用于在 Windows、macOS 或 Linux 上生成基于云的新式 Web 应用。 ASP.NET Core 中的日志记录 .NET 通过 ILogger API 支持高性能结构化日志记录&#xff0c;以帮助监视应用程序行为和诊断问题。 可以通过配置不同的记录提供程…...

树莓派超全系列教程文档--(61)树莓派摄像头高级使用方法

树莓派摄像头高级使用方法 配置通过调谐文件来调整相机行为 使用多个摄像头安装 libcam 和 rpicam-apps依赖关系开发包 文章来源&#xff1a; http://raspberry.dns8844.cn/documentation 原文网址 配置 大多数用例自动工作&#xff0c;无需更改相机配置。但是&#xff0c;一…...

相机从app启动流程

一、流程框架图 二、具体流程分析 1、得到cameralist和对应的静态信息 目录如下: 重点代码分析: 启动相机前,先要通过getCameraIdList获取camera的个数以及id,然后可以通过getCameraCharacteristics获取对应id camera的capabilities(静态信息)进行一些openCamera前的…...

令牌桶 滑动窗口->限流 分布式信号量->限并发的原理 lua脚本分析介绍

文章目录 前言限流限制并发的实际理解限流令牌桶代码实现结果分析令牌桶lua的模拟实现原理总结&#xff1a; 滑动窗口代码实现结果分析lua脚本原理解析 限并发分布式信号量代码实现结果分析lua脚本实现原理 双注解去实现限流 并发结果分析&#xff1a; 实际业务去理解体会统一注…...

华为OD机考-机房布局

import java.util.*;public class DemoTest5 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseSystem.out.println(solve(in.nextLine()));}}priv…...

Go语言多线程问题

打印零与奇偶数&#xff08;leetcode 1116&#xff09; 方法1&#xff1a;使用互斥锁和条件变量 package mainimport ("fmt""sync" )type ZeroEvenOdd struct {n intzeroMutex sync.MutexevenMutex sync.MutexoddMutex sync.Mutexcurrent int…...

jmeter聚合报告中参数详解

sample、average、min、max、90%line、95%line,99%line、Error错误率、吞吐量Thoughput、KB/sec每秒传输的数据量 sample&#xff08;样本数&#xff09; 表示测试中发送的请求数量&#xff0c;即测试执行了多少次请求。 单位&#xff0c;以个或者次数表示。 示例&#xff1a;…...

嵌入式常见 CPU 架构

架构类型架构厂商芯片厂商典型芯片特点与应用场景PICRISC (8/16 位)MicrochipMicrochipPIC16F877A、PIC18F4550简化指令集&#xff0c;单周期执行&#xff1b;低功耗、CIP 独立外设&#xff1b;用于家电、小电机控制、安防面板等嵌入式场景8051CISC (8 位)Intel&#xff08;原始…...

Cilium动手实验室: 精通之旅---13.Cilium LoadBalancer IPAM and L2 Service Announcement

Cilium动手实验室: 精通之旅---13.Cilium LoadBalancer IPAM and L2 Service Announcement 1. LAB环境2. L2公告策略2.1 部署Death Star2.2 访问服务2.3 部署L2公告策略2.4 服务宣告 3. 可视化 ARP 流量3.1 部署新服务3.2 准备可视化3.3 再次请求 4. 自动IPAM4.1 IPAM Pool4.2 …...

通过MicroSip配置自己的freeswitch服务器进行调试记录

之前用docker安装的freeswitch的&#xff0c;启动是正常的&#xff0c; 但用下面的Microsip连接不上 主要原因有可能一下几个 1、通过下面命令可以看 [rootlocalhost default]# docker exec -it freeswitch fs_cli -x "sofia status profile internal"Name …...