vMask

Директива Vue — attach в шаблоне. Импортируется из tinyval-mask/vue.

Сигнатура

const vMask: Directive<HTMLElement, MaskInput | { mask: MaskInput; placeholder?: string; raw?: boolean; onChange?: (state: MaskState) => void }>

Запись	В поле	В v-model
v-mask="phoneMask"	+7 (999) 123-45-67	'+7 (999) 123-45-67'
v-mask.raw="phoneMask"	+7 (999) 123-45-67	'79991234567'
v-mask="{ mask: phoneMask, placeholder: '_' }"	+7 (999) 12_-__-__	'+7 (999) 12'
v-mask.raw="{ mask: phoneMask, placeholder: '_' }"	+7 (999) 12_-__-__	'7999912'

• Маска — объект маски, строка-шаблон, массив шаблонов или опции createMask.
• Если значение изменилось (другая страна телефона), маска обновится.
• На обёртке ищет <input> внутри — работает с полями UI-библиотек и <TvField>.
• onChange в объекте настроек получает { value, raw, complete, valid } — например, чтобы подсветить поле или включить кнопку. Вызывается только при изменении состояния, поэтому объект можно писать прямо в шаблоне.
• При размонтировании маска снимается.

Пример

<script setup lang="ts">
import { computed, ref } from 'vue';
import { phone, type PhoneCountry } from 'tinyval-mask/presets';
import { vMask } from 'tinyval-mask/vue';

const country = ref<PhoneCountry>('ru');
const phoneMask = computed(() => phone(country.value));
const tel = ref('');
</script>

<template>
  <select v-model="country">
    <option value="ru">RU</option>
    <option value="by">BY</option>
  </select>
  <input v-model="tel" v-mask.raw="{ mask: phoneMask, placeholder: '_' }" inputmode="tel" />
  <!-- tel: '79991234567' -->
</template>

Правильно ли заполнено поле

<script setup lang="ts">
const cardMask = card();
const cardOk = ref(false);
</script>

<template>
  <input v-model="number" v-mask.raw="{ mask: cardMask, onChange: (s) => (cardOk = s.valid) }" :class="{ error: number && !cardOk }" />
  <button :disabled="!cardOk">Pay</button>
</template>

См. также

• Vue
• attach