OTP поле

Поле Alixan UI для коротких одноразовых кодов с предсказуемыми ячейками и прямыми output events.

Установка

npx alixan-ui-nuxt add otp

Использование

Value: -

<script setup lang="ts">
const code = ref('')

const verify = (value: string) => {
  console.log('submit', value)
}
</script>

<template>
  <OtpInput v-model="code" :length="6" @submit="verify" />
</template>

Длина

<template>
  <div class="grid gap-4">
    <OtpInput :length="4" />
    <OtpInput :length="8" />
  </div>
</template>

Справочник API

Свойство	Тип	По умолчанию	Описание
modelValue	string	''	OTP значение, используемое через v-model.
length	4 \| 5 \| 6 \| 7 \| 8	6	Количество OTP цифр. Значение ограничивается диапазоном от 4 до 8.

Событие	Тип	Описание
@change	(value: string) => void	Вызывается при каждом изменении OTP значения.
@submit	(value: string) => void	Вызывается, когда OTP значение достигает выбранной длины.