vue-otp-field v0.1.5

vue-otp-field

Input Field for OTP

vue-otp-field props

Instalation

Install the package

yarn add vue-otp-field

or

npm install vue-otp-field

Usage

<template>
  <div id="app">
    <div>
      <VueOTPField :onFieldCompleted="onFieldCompleted" :onFill="onFill" />
    </div>
  </div>
</template>

<script>
import VueOTPField from '@/components/VueOTPField'

export default {
  name: 'app',
  components: {
    VueOTPField
  },
  methods: {
    onFieldCompleted (value) {
      console.log('SUBMITTING')
    },
    onFill (inputObj) {
      console.log(inputObj)
    }
  }
}
</script>

onFieldCompleted method will trigger if the user already fill all the input, and you can get value of all the input

onFill method will trigger whenever user start filling the input, you will get the input object of

Example with button

<template>
  <div class="hello">
    <div class="container">
      <VueOTPField :onFill="onFill" />
      <button v-show="showButton" class="btn">Verify</button>
    </div>
  </div>
</template>

<script>
import VueOTPField from 'vue-otp-field'

export default {
  name: 'HelloWorld',
  data () {
    return {
      showButton: false
    }
  },
  components: {
    VueOTPField
  },
  props: {
    msg: String
  },
  methods: {
    onFill (val) {
      val.isFieldsComplete ? this.showButton = true : this.showButton = false
    }
  }
}
</script>