vue3-verification-code-input

🎉A verification code input for vue 3

Demo

Install

npm install --save vue3-verification-code-input

Usage

<template>
  <code-input
    @complete="completed = true"
    :fields="3"
    :fieldWidth="56"
    :fieldHeight="56"
    :required="true"
  />
  <button class="btn" :disabled="!completed">
		Continue
	</button>
</template>

<script setup>
import CodeInput from "./components/CodeInput.vue";
import { ref } from "vue";

const completed = ref(false);
</script>

PropTypes

| Key | Type | Desc | | :---------: | :----: | :-----------------------------: | | fields | number | The count of characters | | disabled | bool | Disable the inputs | | required | bool | require the inputs | | fieldWidth | number | input width | | fieldHeight | number | input height | | title | string | code input title | | className | string | class name |

EmitTypes

| Key | Type | Desc | | :---------: | :----: | :-----------------------------: | | change | func | Trigger on character change | | complete | func | Trigger on all character inputs |

License

MIT © zlayine