Split Input Component for Vue 3.x

Used for otps, transaction pin, passwords etc

Install

NPM

//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

<template>
 <split-input
  v-model="input"
  class-name="w-12 h-8 rounded-sm p-5 font-bold text-lg"
  :input-number="4"
 />
</template>

Or

<script lang="ts">
 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"
            />
        `,
 });
</script>

You can also pass a ref to access the component dom and objects directly

<script setup lang="ts">
 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();
</script>

<template>
 <split-input
  ref="input"
  v-model="input"
  class-name="w-12 h-8 rounded-sm p-5 font-bold text-lg"
  :input-number="4"
 />
 <button
  type="button"
  @click="clear"
  class="px-6 bg-blue-500 text-white text-xs ml-2"
 >
  CLEAR ALL
 </button>
</template>

Thanks! Damilare.