vue3下的密码输入框(antdesignvue)

参考: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.mzph.cn/news/58070.shtml

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

相关文章

2023年下半年抖音小店运营全攻略

每年618过后&#xff0c;7、8月份&#xff0c;都是电商淡季。 尤其是服装类目&#xff0c;很多商家都是直接躺平。 但是到了9月份&#xff0c;一是换季&#xff0c;二是碰上开学季&#xff0c;电商旺季就开始来了&#xff01; 尤其是服装、文具、户外运营这些类目&#xff0…

行业报告|3D感知技术快速发展,打造“机器之眼”,助推各行业加速升级!

原创 | 文 BFT机器人 01 3D视觉感知全栈式平台&#xff0c;硬核实力蓄势待发 1.1 3D视觉感知为“机器之眼”&#xff0c;未来市场空间广阔 3D视觉感知技术充分弥补了2D成像技术的以上不足&#xff0c;可获取空间几何尺寸信息。 过去数十年2D成像技术蓬勃发展&#xff0c;分辨…

-9501 MAL系统没有配置或者服务器不是企业版(dm8达梦数据库)

dm8达梦数据库 -9501 MAL系统没有配置或者服务器不是企业版&#xff09; 环境介绍1 环境检查2 问题原因 环境介绍 搭建主备集群时&#xff0c;遇到报错-9501 MAL系统没有配置或者服务器不是企业版 1 环境检查 检查dmmal.ini配置文件权限正确 dmdba:dinstall&#xff0c;内容正…

ChatGPT Prompting开发实战(一)

一、关于ChatGPT Prompting概述 当我们使用ChatGPT或者调用OpenAI的API时&#xff0c;就是在使用prompt进行交互&#xff0c;用户在对话过程中输入的一切信息都是prompt&#xff08;提示词&#xff09;&#xff0c;当然工业级的prompt与人们通常理解的prompt可能不太一样。下面…

03 最长连续序列

最长连续序列 题解 哈希(O(n)) 给定一个未排序的整数数组 nums &#xff0c;找出数字连续的最长序列&#xff08;不要求序列元素在原数组中连续&#xff09;的长度。 请你设计并实现时间复杂度为 O(n) 的算法解决此问题。 题解 哈希(O(n)) class Solution { public:int long…

JVM运行时数据区

文章目录 JVM内存结构图1、运行时数据区域JDK 1.7JDK 1.81. 线程栈&#xff08;虚拟机栈&#xff09;2. 本地方法栈3. 程序计数器4. 方法区&#xff08;元空间&#xff09;5. 堆6、运行时常量池&#xff08;Runtime Constant Pool&#xff09;7、直接内存&#xff08;Direct Me…

云计算——虚拟化中的网络架构与虚拟网络(文末送书)

作者简介&#xff1a;一名云计算网络运维人员、每天分享网络与运维的技术与干货。 公众号&#xff1a;网络豆 座右铭&#xff1a;低头赶路&#xff0c;敬事如仪 个人主页&#xff1a; 网络豆的主页​​​​​ 目录 前期回顾 前言 一.网卡虚拟化 1.网卡虚拟化方法&…

基于 vue2 发布 npm包

背景&#xff1a;组件化开发需要&#xff0c;走了一遍发布npm包的过程&#xff0c;采用很简单的模式实现包的发布流程&#xff0c;记录如下。 项目参考&#xff1a;基于vue的时间播放器组件&#xff0c;并发布到npm_timeplay.js_xmy_wh的博客-CSDN博客 1、项目初始化 首先&a…

C语言练习题解析:挑战与突破,开启编程新篇章!(1)

&#x1f493;博客主页&#xff1a;江池俊的博客⏩收录专栏&#xff1a;C语言刷题专栏&#x1f449;专栏推荐&#xff1a;✅C语言初阶之路 ✅C语言进阶之路&#x1f4bb;代码仓库&#xff1a;江池俊的代码仓库&#x1f389;欢迎大家点赞&#x1f44d;评论&#x1f4dd;收藏⭐&a…

Vue项目直接报错

最近自己在做一个vue2项目&#xff0c;vue并不熟悉&#xff0c;所以求解&#xff01;&#xff01;&#xff01; 通过命令&#xff1a;vue create app 创建项目&#xff0c;但打开后&#xff0c;浏览器直接报错&#xff0c;意思为&#xff1a;不能在模块外使用import语句(at ho…

多维时序 | MATLAB实现SABO-CNN-GRU-Attention多变量时间序列预测

多维时序 | MATLAB实现SABO-CNN-GRU-Attention多变量时间序列预测 目录 多维时序 | MATLAB实现SABO-CNN-GRU-Attention多变量时间序列预测预测效果基本介绍模型描述程序设计参考资料 预测效果 基本介绍 多维时序 | MATLAB实现SABO-CNN-GRU-Attention多变量时间序列预测。 模型描…

框架分析(5)-Django

框架分析&#xff08;5&#xff09;-Django 专栏介绍Django核心概念以及组件讲解模型&#xff08;Model&#xff09;视图&#xff08;View&#xff09;模板&#xff08;Template&#xff09;路由&#xff08;URLconf&#xff09;表单&#xff08;Form&#xff09;后台管理&…

vue中bus的使用和涉及到的问题

创建一个js文件 import Vue from "Vue" export default new Vue 我们可以直接在要使用的页面中引用使用 import bus from /assets/js/eventBus.js;bus.$emit("info", "123") // 使用bus.$on("info", (val) > { // 接收console.l…

【【萌新的STM32学习20--按键输入实验】】

萌新的STM32学习20–按键输入实验 在了解完蜂鸣器的实验之后我们又进行一个小实验 又是正点原子没有上课讲解的实验 对于这种不平滑的情况我们更多的也会去选择方法进行消除抖动 软件消抖&#xff1a;方法很多&#xff0c;我们例程中使用最简单的延时消抖。检测到按键按下后&…

GitLab启动失败:fail: alertmanager: runsv not running

问题描述 sudo gitlab-ctl restart &#xff0c;报错如下 &#xff1a; summergaoubuntu:/etc/gitlab$ sudo gitlab-ctl start fail: alertmanager: runsv not running fail: gitaly: runsv not running fail: gitlab-exporter: runsv not running fail: gitlab-workhorse: …

【JavaWeb 专题】15个最经典的JavaWeb面试题

文章目录 HTTP长连接和短连接HTTP/1.1 与 HTTP/1.0 的区别可扩展性缓存带宽优化长连接消息传递Host 头域错误提示 AjaxAjax 的优势&#xff1a; JSP 和 servlet 有什么区别&#xff1f;定义区别 JSP 的9大内置对象及作用JSP 的 4 种作用域&#xff1f;session 和 cookie 有什么…

ATA-2161高压放大器的电子实验案例(案例合集)

ATA-2161是一款理想的可放大交直流信号的单通道高压放大器。最大差分输出1600Vp-p(800Vp)高压&#xff0c;可以驱动高压型负载。凭借其优异的指标参数受到不少电子工程师的喜欢&#xff0c;其在电子实验中的应用也非常频繁&#xff0c;下面为大家整理出ATA-2161高压放大器的应用…

代码随想录打卡—day46—【DP】— 8.29 背包END

1 139. 单词拆分 139. 单词拆分 做了很久...估计2h 一开始我的思路卡死了 看题解之后的思路的详解见注释&#xff0c; 我的写法和carl 答案在一些微小的细节上略有不同&#xff0c;我的更好理解&#xff0c;但他的解法更简单。 我写的过程中&#xff0c;需要注意下标和字符…

为何直线导轨要保持日常清洁?

随着时代的发展&#xff0c;已逐步从传统的工业发展模式发展到工业自动化&#xff0c;直线滑轨在工业生产中得到了广泛的应用&#xff0c;大大提高了生产效率&#xff0c;带动了经济效益的增长。 众所周知&#xff0c;想要直线导轨的使用达到预期的效果&#xff0c;日常的保养和…

【论文笔记】Planning and Decision-Making for Autonomous Vehicles

文章目录 Summary1. INTRODUCTION2. MOTION PLANNING AND CONTROL2.1. Vehicle Dynamics and Control2.2. Parallel Autonomy2.3. Motion Planning for Autonomous Vehicles 3. INTEGRATED PERCEPTION AND PLANNING3.1. From Classical Perception to Current Challenges in Ne…