RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://github.com/ejirocodes/vue3-otp-input below:

ejirocodes/vue3-otp-input: 🐗 A fully customisable OTP input component for Vue 3.x

Vue 3 OTP Input is a 5.0 KB fully customizable OTP (one-time password) input component for OTPs, transaction pins, and passwords built with Vue 3.x and Vue Composition API..

You can install vue3-otp-input via the terminal.

<script src="https://unpkg.com/vue3-otp-input"></script>

<script src="https://cdn.jsdelivr.net/npm/vue3-otp-input"></script>

1/3. Register as a Vue component locally OR

<script setup lang="ts">
import { ref } from "vue";
import VOtpInput from "vue3-otp-input";

const otpInput = ref<InstanceType<typeof VOtpInput> | null>(null);
const bindModal = ref("");

const handleOnComplete = (value: string) => {
  console.log("OTP completed: ", value);
};

const handleOnChange = (value: string) => {
  console.log("OTP changed: ", value);
};

const clearInput = () => {
  otpInput.value?.clearInput();
};

const fillInput = (value: string) => {
  console.log(value);
  otpInput.value?.fillInput(value);
};
</script>

1/3. Register as a Vue component globally

//  main.js or main.ts
import { createApp } from 'vue'
import App from './App.vue'

import VOtpInput from "vue3-otp-input";

const app = createApp(App)

app.component('v-otp-input', VOtpInput).mount('#app')

2/3. Use the registered component in your Vue template

<template>
    <div style="display: flex; flex-direction: row">
      <v-otp-input
        ref="otpInput"
        input-classes="otp-input"
        :conditionalClass="['one', 'two', 'three', 'four']"
        separator="-"
        inputType="letter-numeric"
        :num-inputs="4"
        v-model:value="bindValue"
        :should-auto-focus="true"
        :should-focus-order="true"
        @on-change="handleOnChange"
        @on-complete="handleOnComplete"
        :placeholder="['*', '*', '*', '*']"
      />
    </div>
    <button @click="clearInput()">Clear Input</button>
    <button @click="fillInput('2929')">Fill Input</button>
</template>

3/3 [Optional]. Some basic styling options This css has to go into a <style> tag which does not have scoped attributed

<style>
.otp-input {
  width: 40px;
  height: 40px;
  padding: 5px;
  margin: 0 10px;
  font-size: 20px;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.3);
  text-align: center;
}
/* Background colour of an input field with value */
.otp-input.is-complete {
  background-color: #e4e4e4;
}
.otp-input::-webkit-inner-spin-button,
.otp-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input::placeholder {
  font-size: 15px;
  text-align: center;
  font-weight: 600;
}
</style>

Name
Type Required Default Description value string false "" v-modal:value for bind dynamic value num-inputs number true 4 Number of OTP inputs to be rendered. separator component
false Provide a custom separator between inputs by passing a component. For instance, <span>-</span> would add - between each input input-classes className (string) false none Style applied or class passed to each input. input-type string false "tel" Input type. Optional value: "password", "number", "tel", "letter-numeric". inputmode string false "numeric" This allows a browser to display an appropriate virtual keyboard. Optional value: "numeric", "text", "tel". [Learn More](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode) should-auto-focus boolean false false Auto focuses input on inital page load. should-focus-order boolean false false Auto correct the input order. See #39 placeholder array false [] Specify an expected value for each input. Example: :placeholder="['*', '*', '*', '*']". The length of this array should be equal to num-inputs. conditionalClass array false [] Specify a class to be applied to each input based on the value of the input. Example: :conditionalClass="['one', 'two', 'three', 'four']". The length of this array should be equal to num-inputs. is-disabled boolean false false Disables all the input fields. Name
Description clearInput() Use with ref for clearing all otp inputs, see code example section. fillInput() Use with ref for fill otp inputs. The value should be same length as `numInputs` length. See code example section. Name
Description on-change Return OTP code was changing when we made a change in inputs. on-complete Return OTP code typed in inputs.

MIT

Contributions are always welcome!

See contributing.md for ways to get started.

Please adhere to this project's code of conduct.

This component is a rewite of vue-otp-input component to support Vue 3.x. Feel free to use it in your project, report bugs and make PR 👏🏽.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4