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;分辨…

flume系列之:记录一次消费大量Debezium数据,数据包含dml语句比较大,造成数据堆积在channel的解决方法

flume系列之:记录一次消费大量Debezium数据,数据包含dml语句比较大,造成数据堆积在channel的解决方法 一、背景二、相关技术博客三、flume层面解决方法四、debezium数据采集层面解决方法一、背景 Debezium采集了大量的数据,数据包含DMl语句,数据本身比较大。flume消费了大…

Mybatis insert返回主键id

个人公众号&#x1f415;已经开通了&#xff0c;欢迎关注&#xff01; 面试宝典公众号&#xff1a;源1024 第一种方式&#xff1a;添加selectKey标签属性 useGeneratedKeys设置为 true &#xff0c;表示如果插入的表id以自增列为主键&#xff0c;则允许 JDBC 支持自动生成主键…

Python 操作 Redis 数据库介绍

Redis 作为常用的 NoSql 数据库&#xff0c;主要用于缓存数据&#xff0c;提高数据读取效率&#xff0c;那在 Python 中应该如果连接和操作 Redis 呢&#xff1f;今天就为大概简单介绍下&#xff0c;在 Python 中操作 Redis 常用命令。 安装 redis 首先还是需要先安装 redis …

mysql 基本操作2

目录 Update 将小白龙的数学成绩跟新为 80 分 将总成绩后三名的数学成绩30分 Delete 删除沙悟净的成绩 删除倒数第一名的成绩 Truncate 聚合函数 count 查看员工表里面的人数 查看男女员工的个数 查看男员工占所有员工个数的比例 sum 计算所有员工的工资和 计算各…

-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…

Redis 7 第五讲 事务、管道、发布订阅 过渡篇

事务 理论 可以一次执行多个命令,本质是一组命令的集合。一个事务中的所有命令都会序列化,按顺序地串行化执行而不会被其它命令插入,不许加塞 一个队列中,一次性、顺序性、排他性的执行一系列命令 Redis事务 VS 关系型数据库事务 单独的隔离操作Redis的事务仅仅是保证事…

taro.js和nutui实现商品选择页面

1. 首先安装 Taro.js 和 NutUI: npm install -g tarojs/cli npm install taro-ui 2. 创建 Taro 项目并进入项目目录&#xff1a; taro init myapp cd myapp 3. 选用 Taro 模板一并安装依赖&#xff1a; npm install 4. 在页面目录中创建商品选择页&#xff1a; taro cre…

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.网卡虚拟化方法&…

spring websocket demo

一 java依赖 gradle 配置 implementation "org.springframework.boot:spring-boot-starter-websocket" implementation "org.springframework.security:spring-security-messaging" 二 配置WebSocketConfig import org.springframework.beans.factory.a…

基于 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…

记录在ubuntu 18.04系统上安装虚拟机的过程

- 下载ubuntu镜像 ubuntu镜像下载地址 我下载的是desktop桌面版&#xff0c;比较好操作。 - 烧录 我用的Mac&#xff0c;使用的是balenaEtcher软件进行磁盘烧录。 balenaEtcher下载地址 如果出现磁盘损坏或者无法再次使用&#xff0c;参考这里解决&#xff1a;进入 - 安…

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;后台管理&…