网站开发的主要内容设计人才网官网

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

1. 效果预览
   
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' : ''"