vue實現驗證碼輸入框組件

來源：懂視網責編：小采時間：2020-11-27 22:23:41

vue實現驗證碼輸入框組件

vue實現驗證碼輸入框組件:先來看波完成效果圖需求輸入4位或6位短信驗證碼，輸入完成后收起鍵盤實現步驟第一步布局排版 <div class=security-code-wrap> <label for=code> <ul class=security-code-container>

推薦度：

點擊下載本文 文檔為doc格式

導讀vue實現驗證碼輸入框組件:先來看波完成效果圖需求輸入4位或6位短信驗證碼，輸入完成后收起鍵盤實現步驟第一步布局排版 <div class=security-code-wrap> <label for=code> <ul class=security-code-container>

先來看波完成效果圖

需求

輸入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實現驗證碼輸入框組件，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

vue實現驗證碼輸入框組件

推薦度：

點擊下載本文 文檔為doc格式

標簽： VUE 組件輸入框

熱門焦點

vue實現驗證碼輸入框組件

vue實現驗證碼輸入框組件

vue實現驗證碼輸入框組件

最新推薦

猜你喜歡

熱門推薦