vue3下的密码输入框（antdesignvue）

来福福是小可爱！

已于 2023-08-30 09:35:37 修改

阅读量900

点赞数

文章标签：前端 javascript

于 2023-08-29 17:18:29 首次发布

本文链接：https://blog.csdn.net/sinat_31773153/article/details/132562398

版权

参考：vue下的密码输入框
注意：这是个半成品，有些问题（input输入框加了文字间距letter-spaceing，会导致输入到第6位的时候会往后窜出来一个空白框、光标位置页会在数字前面），建议不采用下面这种方式，用另外的（画六个input框更方便）

效果预览
实现思路
制作6个小的正方形div
用一个input覆盖在6个div上
给input设置透明（透明掉input）
源码
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' : ''"