vue-pincode-input
Version:
Great pincode input component for Vue.js applications.
83 lines (63 loc) • 1.77 kB
Markdown
# vue-pincode-input
Great pincode input component for Vue.js applications.
Demo on [GitHub Pages](https://seokky.github.io/vue-pincode-input/)
## Features
- configurable length (symbols count)
- override-friendly styles
- auto moving focus when filling
- auto moving focus when deleting
- auto selecting cell content on focusing
- call for native numeric keyboard on mobiles
- optional secure mode (password input type)
- character preview on typing (configurable duration)
## Attention!
Styles that component have are written just for demo. But that styles are override-friendly, so you can write any styles you want.
## Usage
```
npm i --save vue-pincode-input
```
or with yarn
```
yarn add vue-pincode-input
```
Then in any component:
```
import PincodeInput from 'vue-pincode-input';
// The name can be different depending on your desire
```
```
<div class="input-wrapper">
<PincodeInput
v-model="code"
placeholder="0"
/>
</div>
```
**Attention**: you should use _'input.vue-pincode-input'_ instead _'.vue-pincode-input'_ in order to rule specificity was higher
```
<style>
div.vue-pincode-input-wrapper {
// any styles you want for wrapper
}
input.vue-pincode-input {
// any styles you want for each cell
}
<style>
```
## Props
- **length** (symbols count)
- type: Number
- default: 4
- **autofocus** (auto focus first cell)
- type: Boolean
- default: true
- **secure** (password input type)
- type: Boolean
- default: false
- **characterPreview** (preview character on typing)
- type: Boolean
- default: true
- **previewDuration** (duration of character preview)
- type: Number
- default: 300