OTP өрісі

Болжамды ұяшықтары және direct output events бар қысқа бір реттік кодтарға арналған Alixan UI өрісі.

Орнату

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	''	v-model арқылы қолданылатын OTP мәні.
length	4 \| 5 \| 6 \| 7 \| 8	6	OTP цифрларының саны. Мән 4 пен 8 аралығында шектеледі.

Оқиға	Түрі	Сипаттама
@change	(value: string) => void	OTP мәні әр өзгерген сайын шығарылады.
@submit	(value: string) => void	OTP мәні таңдалған ұзындыққа жеткенде шығарылады.