Vitral 0.2
Formulário

InputMask

Uma caixa de texto em que se digita dentro de um padrão, como um telefone ou uma data, com os literais preenchidos para você.

Testado com WAI-ARIA

Importação

main.ts
import { InputMask } from '@vitral/vue';

Básico

Value: — 
<script setup lang="ts">import { InputMask, Label, StackPanel } from '@vitral/vue';import { ref } from 'vue'; const phone = ref('');const done = ref(false);</script> <template>    <StackPanel spacing="0.375rem" style="min-width: 16rem">        <Label for="mask-phone">Phone</Label>        <InputMask id="mask-phone" v-model="phone" mask="(999) 999-9999" placeholder="(999) 999-9999" autocomplete="tel-national" @complete="done = true" />        <small style="color: var(--vt-text-muted-color)">Value: {{ phone || '—' }} {{ done ? '· complete' : '' }}</small>    </StackPanel></template>

Valor sem máscara

v-model: —
<script setup lang="ts">import { InputMask, Label, StackPanel } from '@vitral/vue';import { ref } from 'vue'; const cpf = ref('');</script> <template>    <StackPanel spacing="0.375rem" style="min-width: 16rem">        <Label for="mask-cpf">CPF</Label>        <InputMask id="mask-cpf" v-model="cpf" mask="999.999.999-99" unmask />        <small style="color: var(--vt-text-muted-color)">v-model: {{ cpf || '—' }}</small>    </StackPanel></template>

Caracteres de posição e partes opcionais

<script setup lang="ts">import { InputMask, Label, StackPanel } from '@vitral/vue';import { ref } from 'vue'; const date = ref('');const serial = ref('');</script> <template>    <StackPanel orientation="horizontal" spacing="0.75rem" align="start" wrap>        <StackPanel spacing="0.375rem" style="min-width: 16rem">            <Label for="mask-date">Date</Label>            <InputMask id="mask-date" v-model="date" mask="99/99/9999" slot-char="mm/dd/yyyy" />        </StackPanel>        <StackPanel spacing="0.375rem" style="min-width: 16rem">            <Label for="mask-serial">Serial (last two optional)</Label>            <InputMask id="mask-serial" v-model="serial" mask="aa-9999?-**" :auto-clear="false" />        </StackPanel>    </StackPanel></template>

Tamanhos e estados

<script setup lang="ts">import { InputMask } from '@vitral/vue';</script> <template>    <InputMask mask="999" size="small" aria-label="Small" />    <InputMask mask="999" variant="filled" aria-label="Filled" />    <InputMask mask="999" invalid aria-label="Invalid" />    <InputMask mask="999" disabled model-value="123" aria-label="Disabled" /></template>

API

Lido de packages/vue/src/components/InputMask/types.ts, então diz o que o componente aceita de fato.

Props

NomeTipoDescrição
mask *stringO padrão: `9` aceita um dígito, `a` uma letra, `*` qualquer um; tudo depois de `?` é opcional; qualquer outro caractere é digitado pelo leitor.
slotCharstringO que uma posição vazia mostra: um caractere, ou uma string do tamanho da máscara (`'mm/dd/yyyy'`). O padrão é `_`.
autoClearbooleanLimpa um valor incompleto quando a caixa perde o foco. O padrão é true.
unmaskbooleanO v-model recebe só os caracteres digitados, sem os literais.
definitionsRecord<string, RegExp>Caracteres de posição extras, cada um com os caracteres que aceita.
sizeSize—
variantInputVariantO padrão é o `inputVariant` do plugin.
invalidboolean—
disabledboolean—
readonlyboolean—
fluidboolean—

Mais pt, dt e unstyled de BaseProps; veja pass-through e modo sem estilo.

Emits

EventoPayloadDescrição
completeevent: { originalEvent: Event; value: string }Todas as posições obrigatórias estão preenchidas.
focusevent: FocusEvent—
blurevent: FocusEvent—

Usado nestes templates