@j2only/pincode

Vue.js pincode input component. :lock: Written entirely on Vue 3 Composition API with Typescript and Vite. Compatible only with Vue.js 3.x.

• Simple pincode input field
• Minimal style
• Customizable
• Smooth animations
• Optional keyboard input (with backspace and delete keys support)

You can check a DEMO HERE

Installation

Install this component via package manager:

yarn add @j2only/pincode

or

npm install --save @j2only/pincode

Usage

Import the component in your app and pass some settings:

<template>
    <vue-pincode
        name="pincode"
        ref="pincodeInput"
        :length="4"
        :releaseSuccess="true"
        :releaseSuccessDelay="2500"
        :releaseErrorDelay="500"
        :customButton="true"
        :keyboardInput="true"
        :focusRequired="true"
        :activeElement="activeEl"
        @clickButton="buttonFn"
        @clickCustomButton="cButtonFn"
        @pincode="checkPincode"
    />
</template>

<script setup lang="ts">
import VuePincode from "@j2only/pincode";

const pincodeInput = ref()
const cButtonFn = ref(() => alert("the custom button clicked!"))
const answer = "1234"
const activeEl = ref(document.body) as Ref<HTMLElement>

function checkPincode(pincode: string) {
    setTimeout(() => {
        if (pincode === answer)
            pincodeInput.value.triggerSuccess()
        else
            pincodeInput.value.triggerMiss()
    }, 300)
}
</script>

Props

As you can see, the component accepts some props:

CSS Variables

Also, you can customize some styles via CSS Variables:

Events

Project development

• yarn dev compiles and hot-reloads demo for development
• yarn lint lints and fixes files
• yarn build compiles and minifies production files and demo

Licensing

MIT License Forked from @weslinkde/vue-pincode, Dominik Lenz :copyright: 2020 Weslink GmbH, MIT License