效果

先來看波完成效果圖

預(yù)覽地址

github地址

npm地址

需求

輸入4位或6位短信驗(yàn)證碼，輸入完成后收起鍵盤

實(shí)現(xiàn)步驟

第一步

布局排版

<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> 復(fù)制代碼

• 使用li元素來模擬輸入框的顯示，沒有別的目的，就只是為了語義化，當(dāng)然你也可以使用其他任意一個(gè)元素來模擬，比如div。
• 使用label標(biāo)簽的好處在于它可以跟input的click事件關(guān)聯(lián)上，一方面實(shí)現(xiàn)了語義化解決方案，另一方面也省去了我們通過js來喚起虛擬鍵盤。

隱藏輸入框

.input-code {position: absolute;left: -9999px;top: -9999px; } 復(fù)制代碼

• 將真實(shí)的輸入框定位到屏幕可視區(qū)域以外的地方，虛擬鍵盤被喚起時(shí)，就不會將頁面往上頂了。所以你的驗(yàn)證碼輸入組件一定要放在虛擬鍵盤遮擋不了的地方。

第二步

處理驗(yàn)證碼輸入

handleSubmit () {this.$emit('input', this.value) }, handleInput (e) {if (e.target.value.length >= this.length) {this.hideKeyboard()}this.handleSubmit() } 復(fù)制代碼

• 輸入時(shí)，給輸入框賦一次值，是為了解決android端上輸入框失焦后重新聚焦，輸入光標(biāo)會定在第一位的前面，經(jīng)過賦值再聚焦，光標(biāo)的位置就會顯示在最后一位后面。

第三步

完成輸入后關(guān)閉虛擬鍵盤

hideKeyboard() {// 輸入完成隱藏鍵盤document.activeElement.blur() // ios隱藏鍵盤this.$refs.input.blur() // android隱藏鍵盤 } 復(fù)制代碼

組件完整代碼

<template><div class="security-code-wrap"><label :for="`code-${uuid}`"><ul :class="`${theme}-container security-code-container`"><li class="field-wrap" v-for="(item, index) in length" :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-${uuid}`" :name="`code-${uuid}`" type="tel" :maxlength="length"autocorrect="off" autocomplete="off" autocapitalize="off"></div> </template><script>export default {name: 'SecurityCode',// component propertiesprops: {length: {type: Number,default: 4},placeholder: {type: String,default: '-'},theme: {type: String,default: 'block'}},// variablesdata () {return {value: ''}},computed: {uuid () {return Math.random().toString(36).substring(3, 8)}},methods: {hideKeyboard () {// 輸入完成隱藏鍵盤document.activeElement.blur() // ios隱藏鍵盤this.$refs.input.blur() // android隱藏鍵盤},handleSubmit () {this.$emit('input', this.value)},handleInput (e) {if (e.target.value.length >= this.length) {this.hideKeyboard()}this.handleSubmit()}}} </script><style scoped lang="less">.security-code-wrap {display: flex;align-items: center;justify-content: center;}.security-code-container {margin: 0;padding: 0;display: flex;.field-wrap {list-style: none;display: block;height: 40px;width: 40px;line-height: 40px;font-size: 16px;.char-field {font-style: normal;}}}.block-container {justify-content: center;.field-wrap {background-color: #fff;margin: 2px;color: #000;}}.line-container {position: relative;background-color: #fff;&:after {box-sizing: border-box;content: "";width: 200%;height: 200%;transform: scale(.5);position: absolute;border: 1px solid #d9d9d9;top: 0;left: 0;transform-origin: 0 0;border-radius: 4px;}.field-wrap {flex: 1;position: relative;&:not(:last-child):after {content: "";width: 1px;height: 50%;position: absolute;right: 0;top: 25%;background-color: #d9d9d9;transform: scaleX(.5);}}}.input-code {position: absolute;left: -9999px;top: -9999px;}</style>復(fù)制代碼

組件使用代碼

<security-code v-model="code"></security-code> 復(fù)制代碼

結(jié)束語

怎么樣，484 so easy

一開始的思路也是4個(gè)輸入框，監(jiān)聽輸入完成跳到下一個(gè)輸入框，這樣的做法也能達(dá)到目的，不過需要更多的代碼去維護(hù)這個(gè)規(guī)則，不夠優(yōu)雅。

目前的做法已經(jīng)是我能想到最優(yōu)的解決方案，如果你有更好的實(shí)現(xiàn)思路，還望不吝賜教。

預(yù)覽地址

github地址

npm地址

總結(jié)

以上是生活随笔為你收集整理的使用VUE分分钟写一个验证码输入组件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。