vue3下的密码输入框(antdesignvue)

news2024/11/18 15:45:43

参考:vue下的密码输入框
注意:这是个半成品,有些问题(输入到第6位的时候会往后窜出来一个空白框、光标位置会在数字前面),建议不采用下面这种方式,用另外的(画六个input框更方便)

  1. 效果预览
    PC密码框效果
  2. 实现思路
    制作6个小的正方形div
    用一个input覆盖在6个div上
    给input设置透明(透明掉input)
  3. 源码
    html

          <div class="footerTextStyle">请输入6位数支付密码</div>
          <div class="input-box">
            <div class="code-item" :class="codeValue?.length == 0 && inputFocus ? 'code-item-active' : ''">{
  { codeValue[0]
            }}
            </div>
            <div class="code-item" :class="codeValue?.length == 1 && inputFocus ? 'code-item-active' : ''"&g

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

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

相关文章

LabVIEW开发油气井管道内无线通信微波系统

LabVIEW开发油气井管道内无线通信微波系统 由于石油和天然气行业的重要性&#xff0c;许多公司和研究人员正在研究和开发新的通信和传感器技术。需要解决的问题与管道状况、地震活动、腐蚀水平、可能的气体泄漏检测和其他性能问题的实时和连续监测有关。处理这些问题的最广泛使…

forlium 笔记 Map

用于创建交互式地图 1 主要参数 1.1. location 地图位置 地图的经纬度 import foliumm folium.Map(location[31.186358, 121.510256],zoom_start15)m 1.2 tiles 内置样式 默认是OpenStreetMap 1.2.1 Stamen Terrain 它强调了地形特征&#xff0c;如山脉、河流和道路 m …

9、Spring_事务管理

六、Spring 事务管理 1.Spring 事务简介 事务概述&#xff1a;保证数据库操作同时成功或者同时失败 Spring 事务的概述&#xff1a;在数据层保证数据库操作同时成功或者同时失败 2.转账案例分析 转账肯定有一个业务方法&#xff1a;给转出用户减钱&#xff0c;给转入用户加…

Java+Github+Jenkins部署

Java项目—Jenkins部署笔记 一&#xff0c;准备 一台服务器操作系统&#xff0c;示例为ubuntu 22.0.4 可运行lsb_release -a查看 二&#xff0c;安装 docker 更新软件包列表&#xff1a; sudo apt update安装必要的软件包&#xff0c;以便使用HTTPS通过APT下载软件包&#x…

财务大模型,产业路向何方?

无论过去还是将来&#xff0c;财务的角色和意义都不会被颠覆&#xff0c;只会被清晰化&#xff0c;只会回归到本源。 作者|思杭 编辑|皮爷 出品|产业家 “今年&#xff0c;我们被市场倒逼着做数字化转型。一切都被打乱了&#xff0c;像这样的转变是前所未有的。到了8月&…

泰迪大数据实训平台产品介绍

大数据产品包括&#xff1a;大数据实训管理平台、大数据开发实训平台、大数据编程实训平台等 大数据实训管理平台 泰迪大数据实训平台从课程管理、资源管理、实训管理等方面出发&#xff0c;主要解决现有实验室无法满足教学需求、传统教学流程和工具低效耗时和内部教学…

hadoop 学习:mapreduce 入门案例三:顾客信息与订单信息相关联(联表)

这里的知识点在于如何合并两张表&#xff0c;事实上这种业务场景我们很熟悉了&#xff0c;这就是我们在学习 MySQL 的时候接触到的内连接&#xff0c;左连接&#xff0c;而现在我们要学习 mapreduce 中的做法 这里我们可以选择在 map 阶段和reduce阶段去做 数据&#xff1a; …

聚合支付-第3章-支付宝支付接入指南

惠民支付 第3章讲义-支付宝接入指南 支付宝接入步骤: 1、进入网址https://open.alipay.com/develop/manage 2、扫码登录支付宝账号&#xff0c;控制台&#xff0c;最下边有一个沙箱环境 3、在“支付宝开放平台开发助手”软件中生成密钥&#xff0c;点击生成密钥&#xff0c;保…

Axure RP 8.1.0.3400(原型设计工具)

Axure RP 8是一款原型设计工具&#xff0c;它提供了丰富的功能和工具&#xff0c;帮助用户创建高质量的网页、移动应用和桌面软件原型。以下是Axure RP 8的一些特色介绍&#xff1a; 强大的交互设计&#xff1a;Axure RP 8支持创建复杂的动画和过渡效果&#xff0c;让你的原型更…

一文彻底扒光 Handler

作者&#xff1a;HenAndroid 典型的生产者-消费者模式。 Android跨进程要掌握的是Binder, 而同一进程中最重要的应该就是Handler 消息通信机制了。我这么说&#xff0c;大家不知道是否认同&#xff0c;如果认同&#xff0c;还希望能给一个关注哈。 Handler 是什么&#xff1f;…

AI智能语音识别模块(一)——离线模组介绍

文章目录 离线语音控制模块简介引脚定义开发平台总结 离线语音控制模块 简介 这是一款低成本&#xff0c;低功耗&#xff0c;小体积的高性价比离线语音识别开发板。能快速学习、验证离线语音控制各种外设&#xff0c;如继电器、LED灯&#xff0c;PWM调光等。 板载了Micro USB接…

MySQL DATE_SUB的实践

函数简介DATE_SUB()函数从DATE或DATETIME值中减去时间值(或间隔)。 下面说明了DATE_SUB()函数的语法&#xff1a; DATE_SUB(start_date,INTERVAL expr unit); DATE_SUB()函数接受两个参数&#xff1a; start_date是DATE或DATETIME的起始值。 expr是一个字符串&#xff0c;用于确…

哪个牌子的电视盒子好用?小编盘点复购率最高电视盒子排行榜

复购率可以体现出产品评价如何&#xff0c;电视盒子是我们经常要购买的数码产品&#xff0c;那么电视盒子哪些品牌的复购率最高&#xff1f;用户忠实度最高呢&#xff1f;想了解哪个牌子的电视盒子好用&#xff0c;可以看看小编根据复购情况整理的电视盒子排行榜&#xff1a; ●…

Weblogic漏洞(三)之 Weblogic 弱口令、任意文件读取漏洞

Weblogic 弱口令、任意文件读取漏洞 环境安装 此次我们实验的靶场&#xff0c;是vnlhub中的Weblogic漏洞中的weak_password靶场&#xff0c;我们 cd 到weak_password&#xff0c;然后输入以下命令启动靶场环境&#xff1a; docker-compose up -d输入以下的命令可以查看当前启…

问道管理:仙人指路最佳买入形态?

仙人指路是一种基于技能剖析的股票交易目标。许多投资者运用该目标来预测股票价格的上涨或下跌趋势。在买入股票时&#xff0c;仙人指路能够为投资者供给有用的信息&#xff0c;协助他们找到最佳的买入形状。本文将从多个视点剖析仙人指路的最佳买入形状。 一、仙人指路的基本原…

适合本地运营的同城团购优质商家圈子小程序开发演示

很火的一款适合本地同城运营的同城团购商家圈子小程序。有很多城市都有在用这个小程序做同城资源&#xff0c;实现完美变现。 小程序功能就是将本地商家邀请入驻&#xff0c;以团购的形式出售商家产品或服务套餐。借助微信的社交属性配合同城推广员可以迅速推广起来。 对于商…

网络安全法+网络安全等级保护

网络安全法 网络安全法21条 网络安全法31条 网络安全等级保护 网络安全等级保护分为几级? 一个中心&#xff0c;三重防护 等级保护2.0网络拓扑图 安全区域边界 安全计算环境 等保安全产品 物理机房安全设计

Autofac中多个类继承同一个接口,如何注入?与抽象工厂模式相结合

多个类继承同一个接口,如何注入&#xff1f;与抽象工厂模式相结合 需求: 原来是抽象工厂模式,多个类继承同一个接口。 现在需要使用Autofac进行选择性注入。 Autofac默认常识: Autofac中多个类继承同一个接口,默认是最后一个接口注入的类。 解决方案&#xff1a;(约定大于配…

nodepad++ 插件的安装

nodepad 插件的安装 一、插件安装二、安装插件&#xff1a;Json Viewer nodepad 有 插件管理功能&#xff0c;其中有格式化json以及可以将json作为树查看的插件&#xff1a; Json Viewer 一、插件安装 1、首先下载最新的notepad 64位【https://notepad-plus.en.softonic.com…

Java——一个简单的计算器程序

该代码是一个简单的计算器程序&#xff0c;使用了Java的图形化界面库Swing。具体分析如下&#xff1a; 导入必要的类和包&#xff1a; import java.awt.*; import java.awt.event.ActionEvent; import java.awt.event.ActionListener; import java.util.Objects; import javax.…