pin-input

PIN-Input is a Vue component o capture PIN/MPIN like input

Demo

Live example here

Installation

npm install v3-pin-input --save

Usage

// index.js
import { createApp } from "vue";
import App from "./App.vue";
import PinInput from "/node_modules/v3-pin-input/dist/pin-input.es";
import "/node_modules/v3-pin-input/dist/style.css";

const app = createApp(App);
app.use(PinInput);
app.mount("#app");

<!-- vue component -->
<template>
  <form @submit="onSubmit">
    <pin-input
      :count="6"
      :defaultValue="inputValue"
      :hidden="false"
      @on-change="onChange"
      @on-error="onError"
    />
  </form>
</template>

<script>
  export default {
    name: "component",
    data() {
      return {
        inputValue: 6,
      };
    },
    methods: {
      onChange(newInputValue) {
        this.inputValue = Number(newInputValue);
      },
      onClear() {
        this.inputValue = "";
      },
      onError(message) {
        alert(message);
      },
      onSubmit(e) {
        e.preventDefault();
        alert(`newInputValue: ${this.inputValue}`);
      },
    },
  };
</script>

Props:

| Property | Type | Description | |:------------------------|:--------|:--------------------------------------------------------------------| | count | number | the number of symbols in the pin code | | defaultValue | string | Optional parameter. The default value to be entered in the inputs | | hidden | boolean | Do I need to hide characters during user input (type="password") |

Methods:

| Property | Event | Description | |:-----------|:--------|:--------------------------------------------------------------------------| | @on-change | string | triggered when the user changes the field. Returns the new pin-code value | | @on-error | string | Triggered when data is entered incorrectly. Returns an error message |