参考: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' : ''"