@zeedhi/zd-otp-input-vue

Componente OtpInput para Zeedhi

O component zd-otp-input foi criado para servir como entrada para senhas descartaveis (OTP)

Instalação

Para instalar o pacote do componente, basta rodar o comando:
npm i @zeedhi/zd-otp-input
Com isso, dois pacotes serão instalados: o @zeedhi/zd-otp-input-common e o @zeedhi/zd-otp-input-vue.
Após a instalação, é necessário que você importe o pacote @zeedhi/zd-otp-input-vue dentro de seu arquivo de configuração zeedhi.ts

import { ZdOtpInput } from '@zeedhi/zd-otp-input-vue';

Vue.component('ZdOtpInput', ZdOtpInput);

Já o pacote @zeedhi/zd-otp-input-common deve ser importado no arquivo controller do componente.

Uso Básico

Para usar, defina a propriedade component como 'ZdOtpInput'.

{
  "name": "otp-input-example",
  "component": "ZdOtpInput"
}

Propriedades

Nome	Tipo	Default	Descrição
dark	boolean	false	define se o componente é dark
disabled	boolean	false	Desabilitar o componente
hideSpinButtons	boolean	false	Oculta os botões giratórios na entrada quando o tipo é definido como número
id	string	undefined	Define o ID do DOM no componente
length	number	6	O comprimento do campo OTP
plain	boolean	false	Definido como true para aplicar estilo simples
readonly	boolean	false	Define é o componente é apenas leitura
type	'text' | 'password' | 'number'	'text'	Tipos suportados
value	any	undefined	Valor do input

---

Eventos

Nome	Parametros	Descrição
finish	value: string	Emitido quando a entrada é preenchida completamente e o cursor está desfocado
input	value: string	O modelo vinculado atualizado
change	value: string	Emitido quando a entrada é alterada pela interação do usuário