vue实现一个6个输入框的验证码输入组件

vue实现一个6个输入框的验证码输入组件_第1张图片

要实现的功能:

完全和单输入框一样的操作,甚至可以插入覆盖:
1,限制输入数字
2,正常输入
3,backspace删除
4,paste任意位置粘贴输入
5,光标选中一个数字,滚轮可以微调数字大小,限制0-9
6,123|456 自动覆盖光标后输入的字符,此时光标在3后,继续输入111,会得到123111,而不用手动删除456
7,封装成vue单文件组件,方便任意调用。

模板代码

实现了键盘的keydown/keyup/paste/input和鼠标滚轮mousewheel事件
使用了6个输入框的方案来实现。

样式部分:使用了scss模式

具体实现逻辑:主要实现以上几个键盘事件操作。

如果你发现了bug,或者有优化空间,欢迎你的指正和建议。我会随时更新到原代码当中,分享给大家。

你可能感兴趣的:(vue.js,input,验证码,表单,6位)