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

vue3下的密码输入框(antdesignvue)

参考:vue下的密码输入框
注意:这是个半成品,有些问题(input输入框加了文字间距letter-spaceing,会导致输入到第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' : ''"
http://www.lryc.cn/news/151620.html

相关文章:

  • 鸿鹄企业工程项目管理系统 Spring Cloud+Spring Boot+前后端分离构建工程项目管理系统源代码
  • 【爬虫】5.5 Selenium 爬取Ajax网页数据
  • thinkphp6 入门(3)--获取GET、POST请求的参数值
  • JSON简介
  • [Java]_[初级]_[以SAX流的方式高效读取XML大文件]
  • Visual Studio中平台和配置的概念
  • 【vue2第八章】工程化开发和使用脚手架和文件结构
  • 建造者模式简介
  • 虚拟世界指南:从零开始,一步步教你安装、配置和使用VMware,镜像ISO文件!
  • 服务器卡顿怎么查找原因?
  • Pnpm,npm,yarn
  • Kubernetes技术--使用kubeadm快速部署一个K8s集群
  • LeetCode 45题:跳跃游戏
  • idea中设置指定图片为项目站标
  • 【【萌新的STM32学习-27--USART异步通信配置步骤】】
  • elementplus实现左侧菜单栏收缩与展开
  • VBA技术资料MF50:VBA_在Excel中突出显示前3个值
  • linux定时删除服务器日志
  • 网络地址转换技术NAT(第九课)
  • K8s 在创建pod时api-server是先找scheduler 还是controller-manager
  • 【笔记】常用 js 函数
  • 无涯教程-JavaScript - QUARTILE函数
  • ES6新特性
  • 实现通用的表单清空重置功能
  • 代码随想录 - Day31 - 回溯:组合问题
  • git文件夹内容详解
  • MVC模式分层练习
  • ORB-SLAM2算法12之单目初始化Initializer
  • 固定参数-以京东sign逆向为例
  • 在macOS 上执行sed命令报错问题