vue实现验证码输入框组件
GPT4.0+Midjourney绘画+国内大模型 会员永久免费使用!
【 如果你想靠AI翻身,你先需要一个靠谱的工具! 】
先来看波完成效果图
需求
输入4位或6位短信验证码,输入完成后收起键盘
实现步骤
第一步
布局排版
1 2 3 4 5 6 7 8 9 10 11 12 | <div class= "security-code-wrap" > <label for = "code" > <ul class= "security-code-container" > <li class= "field-wrap" v- for = "(item, index) in number" :key= "index" > <i class= "char-field" >{{value[index] || placeholder}}</i> </li> </ul> </label> <input ref= "input" class= "input-code" @keyup= "handleInput($event)" v-model= "value" id= "code" name= "code" type= "tel" :maxlength= "number" autocorrect= "off" autocomplete= "off" autocapitalize= "off" > </div> |
使用li元素来模拟输入框的显示,没有别的目的,就只是为了语义化,当然你也可以使用其他任意一个元素来模拟,比如div。
使用label标签的好处在于它可以跟input的click事件关联上,一方面实现了语义化解决方案,另一方面也省去了我们通过js来唤起虚拟键盘。
隐藏输入框
1 2 3 4 5 6 7 8 9 10 | .input-code { position: absolute; left: -9999px; top: -99999px; width: 0; height: 0; opacity: 0; overflow: visible; z-index: -1; } |
将真实的输入框定位到屏幕可视区域以外的地方,虚拟键盘被唤起时,就不会将页面往上顶了。所以你的验证码输入组件一定要放在虚拟键盘遮挡不了的地方。
第二步
处理验证码输入
1 2 3 4 5 6 7 8 9 10 | handleSubmit() { this .$emit( 'input' , this .value) }, handleInput(e) { this .$refs.input.value = this .value if ( this .value.length >= this .number) { this .hideKeyboard() } this .handleSubmit() } |
输入时,给输入框赋一次值,是为了解决android端上输入框失焦后重新聚焦,输入光标会定在第一位的前面,经过赋值再聚焦,光标的位置就会显示在最后一位后面。
第三步
完成输入后关闭虚拟键盘
1 2 3 4 5 | hideKeyboard() { // 输入完成隐藏键盘 document.activeElement.blur() // ios隐藏键盘 this .$refs.input.blur() // android隐藏键盘 } |
组件完整代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 | <!--四位验证码输入框组件--> <template> <div class= "security-code-wrap" > <label for = "code" > <ul class= "security-code-container" > <li class= "field-wrap" v- for = "(item, index) in number" :key= "index" > <i class= "char-field" >{{value[index] || placeholder}}</i> </li> </ul> </label> <input ref= "input" class= "input-code" @keyup= "handleInput($event)" v-model= "value" id= "code" name= "code" type= "tel" :maxlength= "number" autocorrect= "off" autocomplete= "off" autocapitalize= "off" > </div> </template> <script> export default { name: 'SecurityCode' , // component properties props: { number: { type: Number, default : 4 }, placeholder: { type: String, default : '-' } }, // variables data() { return { value: '' } }, methods: { hideKeyboard() { // 输入完成隐藏键盘 document.activeElement.blur() // ios隐藏键盘 this .$refs.input.blur() // android隐藏键盘 }, handleSubmit() { this .$emit( 'input' , this .value) }, handleInput(e) { this .$refs.input.value = this .value if ( this .value.length >= this .number) { this .hideKeyboard() } this .handleSubmit() } } } </script> <style scoped lang= "less" > .security-code-wrap { overflow: hidden; } .security-code-container { margin: 0; padding: 0; display: flex; justify-content: center; .field-wrap { list-style: none; display: block; width: 40px; height: 40px; line-height: 40px; font-size: 16px; background-color: #fff; margin: 2px; color: #000; .char-field { font-style: normal; } } } .input-code { position: absolute; left: -9999px; top: -99999px; width: 0; height: 0; opacity: 0; overflow: visible; z-index: -1; } </style> |
组件使用代码
总结
以上所述是小编给大家介绍的vue实现验证码输入框组件,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
微信公众号搜索 “ 脚本之家 ” ,选择关注
程序猿的那些事、送书等活动等着你
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符,请将相关资料发送至 reterry123@163.com 进行投诉反馈,一经查实,立即处理!
相关文章
vue打包报错:ERROR in static/js/xxx.js from U
这篇文章主要介绍了vue打包报错:ERROR in static/js/xxx.js from UglifyJs undefined问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2022-09-09解决前后端分离 vue+springboot 跨域 session+cookie失效问题
这篇文章主要介绍了前后端分离 vue+springboot 跨域 session+cookie失效问题的解决方法,解决过程也很简单 ,需要的朋友可以参考下2019-05-05
最新评论