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