0.1.0 • Published 4 years ago
vue3-verification-code-input v0.1.0
vue3-verification-code-input
🎉A verification code input for vue 3
Demo
Install
npm install --save vue3-verification-code-inputUsage
<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
