Vue.JS開源：基于Vue2.0的移動端驗證碼輸入組件

ikmk1644 7年前發布 | 22K 次閱讀 Vue.js Vue.js開發

vue-input-code

基于Vue2.0的移動端驗證碼輸入組件.

功能預覽

  • 輸入回調
  • 完成回調
  • 自定義驗證碼個數
  • 樣式可控

支持

支持 Vue.js 2.0+.

安裝和使用

npm install vue-input-code --save
  • 作為全局組件使用
//在項目入口文件
import Vue from 'vue'
import VueInputCode from 'vue-input-code'
Vue.component('VueInputCode', VueInputCode)
  • 作為局部組件
//在某個組件中
import VueInputCode from 'vue-input-code'
export default {
  components: {
    VueInputCode
  }
}

HTML中使用:

<vue-input-code span-size="20px" type="number" :number="5" height="50px" span-color="#f35252" input-color="#3498db" input-size="24px" :code="code" :getinput="getInput" :success="success"></vue-input-code>

API

Props

參數 類型 說明 可選值 默認值
code 數組 用戶輸入的驗證碼數組 — —
type 字符串 用戶輸入類型 number,text number
getinput 函數 用戶每次輸入后的回調函數,接受一個驗證碼字符串 — —
success 函數 用戶輸入完成后的回調函數,接受一個驗證碼字符串 — —
span-size 字符串 輸入后的字體顯示大小 — 20px
span-color 字符串 輸入后的字體顯示顏色 — #f35252
input-size 字符串 輸入框的字體顯示大小 — 20px
input-color 字符串 輸入框的字體顯示顏色 — #000
number 數字 驗證碼個數 — 6
height 字符串 整個框的顯示高度 — 60px

 

 

 

 本文由用戶 ikmk1644 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！