Vue如何实现验证码输入交互

【文件属性】：
文件名称：Vue如何实现验证码输入交互
文件大小：80KB
文件格式：PDF
更新时间：2021-01-18 15:39:32
ue 输入 验证码 最近做一个H5的页面，里面有个输入验证码交互，就是移动端比较常见的那种验证码输入交互。就是那种，对，就是那种，一个数字一个下划线，移动端非常常见的那种验证码交互。实现过程中主要参考了美团外卖安卓端的具体交互。 应用到项目中的效果如下。 一般操作： 粘贴效果： 方案选择 方案1：调整文字的间距 设置 input 的 letter-spacing 属性，我们就可以让验证码之间有足够大的空隙，然后再把底线改为有间隔的多个线段貌似就可以了。 然而，这里会有一个问题。就是光标总是会在数字的左边，而我们希望的是输入后的数字的中心位于原来光标的位置。最终我放弃了这个方案。 显然，这个方案并不合适。 方案