tonghoai / vue-otp-2

A OTP input component for Vue

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

VUE OTP INPUT

A OTP input component for Vue

DEMO: https://vue-otp-2-hoaitx.vercel.app/

NPM Version

Installation

npm i vue-otp-2

Usage example

In main.js

import Vue from 'vue'
import VueOtp2 from 'vue-otp-2';

Vue.use(VueOtp2)

In App.vue

<vue-otp-2
  length="6"
  join-character="-"
  inputmode="numeric"
  pattern="[0-9]*"
  @onChange="console.log"
  @onComplete="console.log" 
/>

Props

Name Type Default Description
length String 6 The number of input
join-character String character to join inputs
inputmode String numeric numeric/text
pattern String [0-9]* HTML attribute: pattern

Events

Name Description
onComplete All input typed
onChange Input filled

Style

.vue-otp-2 {
  display: flex;
  justify-content: space-between;

  div {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    input {
      max-width: 30px;
      padding: 11.5px 8px;
      font-size: 20px;
      border-radius: 3px;
      border: 1px solid #cecece;
      text-align: center;
    }

    span {
      display: block;
      flex: 1;
      text-align: center;
    }
  }
}

Release History

1.0.4: Fixed some bugs

  • Fix: length props does not work as expected

1.0.3: Fixed some bugs & improvement

  • Fix: Keypress not working on Samsung devices
  • Added inputmode & pattern html input
  • Improvement style
  • And more...

1.0.2: Fixed some bugs

  • Fix: Event emit not correct

1.0.1: RELEASE

License

MIT

About

A OTP input component for Vue


Languages

Language:Vue 62.3%Language:JavaScript 37.7%