帝王谷资源网 Design By www.wdxyy.com
先来看波完成效果图
需求
输入4位或6位短信验证码,输入完成后收起键盘
实现步骤
第一步
布局排版
<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来唤起虚拟键盘。
隐藏输入框
.input-code { position: absolute; left: -9999px; top: -99999px; width: 0; height: 0; opacity: 0; overflow: visible; z-index: -1; }
将真实的输入框定位到屏幕可视区域以外的地方,虚拟键盘被唤起时,就不会将页面往上顶了。所以你的验证码输入组件一定要放在虚拟键盘遮挡不了的地方。
第二步
处理验证码输入
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端上输入框失焦后重新聚焦,输入光标会定在第一位的前面,经过赋值再聚焦,光标的位置就会显示在最后一位后面。
第三步
完成输入后关闭虚拟键盘
hideKeyboard() { // 输入完成隐藏键盘 document.activeElement.blur() // ios隐藏键盘 this.$refs.input.blur() // android隐藏键盘 }
组件完整代码
<!--四位验证码输入框组件--> <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>
组件使用代码
<security-code v-model="authCode"></security-code>
总结
以上所述是小编给大家介绍的vue实现验证码输入框组件,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
标签:
vue验证码组件
帝王谷资源网 Design By www.wdxyy.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
帝王谷资源网 Design By www.wdxyy.com
暂无评论...
更新日志
2024年10月28日
2024年10月28日
- 群星2013-青春缤纷辑压箱宝大公开3CD2[新加坡限量版][WAV整轨]
- 林育群.2013-BalladShow(日本版)【环球】【WAV+CUE】
- 陈加洛.1992-痛到感觉不到【宝丽金】【WAV+CUE】
- 群星.2023-宿命之敌电视剧原声带【韶愔音乐】【FLAC分轨】
- 東京事変-大発見[FLAC+CUE]
- 椎名林檎-三文ゴシップ[FLAC+CUE]
- 2024年08月04日
- 裘德《裘德「最后的水族馆」演唱会LIVE》[320K/MP3][228.89MB]
- 裘德《裘德「最后的水族馆」演唱会LIVE》[24bit 48kHz][FLAC/分轨][2.08G]
- 基因三重奏《如果你什么都不说 音乐会现场录音》[320K/MP3][145.37MB]
- 孟庭苇.1996-月亮说话(2020环球24KGOLD限量版)【上华】【WAV+CUE】
- 群星.1997-新艺宝优质音响系列·国语精选监听版【新艺宝】【WAV+CUE】
- 阿桑.2005-寂寞在唱歌(星外星引进版)【华研国际】【WAV+CUE】
- 基因三重奏《如果你什么都不说 音乐会现场录音》[FLAC/分轨][287.43MB]
- 蔡题谦《我爱你,却依然要看你走》[320K/MP3][88.65MB]