O component zd-otp-input foi criado para servir como entrada para senhas descartaveis (OTP)
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.
Para usar, defina a propriedade component como 'ZdOtpInput'.
{
"name": "otp-input-example",
"component": "ZdOtpInput"
}
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 |
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 |