🎉A Verification Code Input For Vue.js

vue-verification-code-input

vue verification code input is a really simple verification code (also called PIN) input component for Vue.js. Supports both numbers and text.

verification code input html, verification code input angular, npm react verification code input

How to make use of it:

Install & Download:

# NPM
$ npm i vue-verification-code-input --save

1. Import the component.

import CodeInput from "vue-verification-code-input";

2. Basic usage:

<template>
  <div id="app">
    <CodeInput :loading="false" class="input" v-on:change="onChange" v-on:complete="onComplete" />
  </div>
</template>
export default {
  name: "app",
  components: {
    CodeInput
  },
  methods: {
    onChange(v) {
      console.log("onChange ", v);
    },
    onComplete(v) {
      console.log("onComplete ", v);
    }
  }
};

3. All possible props:

type: {
  type: String,
  default: "number" // or text
},
className: String,
fields: {
  type: Number,
  default: 6
},
fieldWidth: {
  type: Number,
  default: 58
},
fieldHeight: {
  type: Number,
  default: 54
},
autoFocus: {
  type: Boolean,
  default: true
},
disabled: {
  type: Boolean,
  default: false
},
required: {
  type: Boolean,
  default: false
},
title: String,
change: Function,
complete: Function,
loading: {
  type: Boolean,
  default: false
}

Verification Code Input, vue-verification-code-input Plugin/Github


See Demo And Download

Official Website(suweya): Click Here

This superior jQuery/javascript plugin is developed by suweya. For extra advanced usage, please go to the official website.