https://github.com/dammy001/vue-split-input
Vue 3 split input for otps, transaction pins, pin code of any length.
https://github.com/dammy001/vue-split-input
input otp otp-verification pin split-input transaction vue vue3 vue3-typescript
Last synced: 2 months ago
JSON representation
Vue 3 split input for otps, transaction pins, pin code of any length.
- Host: GitHub
- URL: https://github.com/dammy001/vue-split-input
- Owner: dammy001
- Created: 2021-09-28T17:11:25.000Z (over 3 years ago)
- Default Branch: next
- Last Pushed: 2024-05-02T11:11:53.000Z (about 1 year ago)
- Last Synced: 2024-05-03T04:01:34.467Z (about 1 year ago)
- Topics: input, otp, otp-verification, pin, split-input, transaction, vue, vue3, vue3-typescript
- Language: Vue
- Homepage: https://www.npmjs.com/package/vue-split-input
- Size: 12.3 MB
- Stars: 11
- Watchers: 1
- Forks: 2
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Split Input Component for Vue 3.x
Used for otps, transaction pin, passwords etc
### Install
#### NPM
```bash
//with npm
npm i vue-split-input --save
//with yarn
yarn add vue-split-input
//with pnpm
pnpm i vue-split-input
```
### Usage
```
import { createApp } from 'vue';
import Root from './App.vue'
import SplitInput from 'vue-split-input';
const app = createApp(App)
app.use(SplitInput)
app.mount('#app')
```
###### Props
| Props | #Type | #default | #description |
| :----------: | :-------------------------------------------: | :------: | :--------------------------------------------: |
| inputNumber | Number | 6 | Number for input rendered |
| type | String as PropType<'tel', 'password', 'text'> | 'tel' | Input type. Optional value: `password`, `text` |
| className | String | '' | Custom class/style for each input |
| disabled | Boolean | false | Disabled all input |
| placeholder | String | '' | Default description for each input |
| placeholders | Array | null | Default description for all inputs |
###### Events
| Name | #Description |
| :---: | :------------------------------------------------------------: |
| focus | custom focus method that passes the input event as an argument |
###### SplitInput.vue Usage
```vue
```
###### Or
```vue
export default defineComponent({
template: `
<split-input
v-model="input"
class-name="w-12 h-8 rounded-sm p-5 font-bold text-lg"
:input-number="4"
/>
`,
});
```
You can also pass a ref to access the component dom and objects directly
```vue
import { ref } from 'vue';
import type { ComponentPublicInstance } from 'vue';
import type { Prop } from 'vue-split-input';
const input = ref<ComponentPublicInstance<Prop> | null>(null);
const clear = () => input.value?.clearAllInput();
CLEAR ALL
```
Thanks!
Damilare.