1.0.1 • Published 7 months ago
v-pin-input v1.0.1
Vue Pin Input (Vue 3)
Vue Pin Input is a Vue 3 input component for pins, otp etc.
Here is a live demo
Installation
yarn add v-pin-input
# or
npm i v-pin-input
Plugin installation
import { createApp } from 'vue'
import App from './App.vue'
import PinInput from 'v-pin-input'
const app = createApp(App)
app.use(PinInput)
app.mount('#app')
Usage
<script setup lang="ts">
import { ref } from 'vue'
const model = ref('')
const handleCompleted = (val: string) => {
console.log('Completed', val)
}
</script>
<template>
<pin-input
class="wrapper"
v-model="model"
:length="6"
autofocus
input-class="pinInput"
@completed="handleCompleted"
/>
</template>
<style>
.wrapper {
display: flex;
gap: 4px;
}
.pinInput {
width: 20px;
padding: 4px;
border: none;
border-bottom: 2px solid black;
font-size: 1.5rem;
color: black;
margin-right: 4px;
text-align: center;
}
.pinInput:focus {
outline: none;
}
</style>
Props
Property | Type | Default | Description |
---|---|---|---|
length | number | 4 | The amount of the inputs |
autofocus | boolean | true | Autofocus on first input on component load. |
secure | boolean | false | Display * instead of character |
characterPreview | boolean | true | Display character before switch to * in secure mode |
charPreviewDuration | number | 300 | Ms to show the character before switch back to * |
blurOnComplete | boolean | false | true if you want to blur the input when completed |
Events
Name | Payload | Description |
---|---|---|
completed | string | Called once the user completes the input (fills the last empty input) |
References
This is pretty much a combination of vue-split-input and vue-pincode-input
1.0.1
7 months ago
1.0.0
7 months ago
0.0.24
2 years ago
0.0.22
2 years ago
0.0.21
2 years ago
0.0.20
2 years ago
0.0.19
2 years ago
0.0.17
2 years ago
0.0.16
2 years ago
0.0.15
2 years ago
0.0.14
2 years ago
0.0.12
2 years ago
0.0.11
2 years ago
0.0.10
2 years ago
0.0.9
2 years ago
0.0.8
2 years ago
0.0.6
2 years ago
0.0.5
2 years ago
0.0.4
2 years ago