這篇文章主要介紹了vue怎么實(shí)現(xiàn)驗(yàn)證碼輸入框組件，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

成都創(chuàng)新互聯(lián)公司技術(shù)團(tuán)隊(duì)十載來致力于為客戶提供成都做網(wǎng)站、成都網(wǎng)站制作、成都品牌網(wǎng)站建設(shè)、全網(wǎng)營銷推廣、搜索引擎SEO優(yōu)化等服務(wù)。經(jīng)過多年發(fā)展，公司擁有經(jīng)驗(yàn)豐富的技術(shù)團(tuán)隊(duì)，先后服務(wù)、推廣了千余家網(wǎng)站，包括各類中小企業(yè)、企事單位、高校等機(jī)構(gòu)單位。

vue是什么

Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式JavaScript框架，Vue與其它大型框架的區(qū)別是，使用Vue可以自底向上逐層應(yīng)用，其核心庫只關(guān)注視圖層，方便與第三方庫和項(xiàng)目整合，且使用Vue可以采用單文件組件和Vue生態(tài)系統(tǒng)支持的庫開發(fā)復(fù)雜的單頁應(yīng)用。

先來看波完成效果圖

 

需求

輸入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>

使用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: -99999px;
 width: 0;
 height: 0;
 opacity: 0;
 overflow: visible;
 z-index: -1;
}

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

第二步

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

handleSubmit() {
 this.$emit('input', this.value)
},
handleInput(e) {
 this.$refs.input.value = this.value
 if (this.value.length >= this.number) {
  this.hideKeyboard()
 }
 this.handleSubmit()
}

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

第三步

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

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

組件完整代碼

<!--四位驗(yàn)證碼輸入框組件-->
<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>

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“vue怎么實(shí)現(xiàn)驗(yàn)證碼輸入框組件”這篇文章對大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司，關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、網(wǎng)站設(shè)計(jì)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

當(dāng)前名稱：vue怎么實(shí)現(xiàn)驗(yàn)證碼輸入框組件-創(chuàng)新互聯(lián)
路徑分享：http://jinyejixie.com/article22/dpddjc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供云服務(wù)器、外貿(mào)網(wǎng)站建設(shè)、企業(yè)網(wǎng)站制作、域名注冊、網(wǎng)站策劃、微信小程序

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)