UtilsInputMasked

Данный компонент выводит текстовое поле с маской.

Компонент может быть использован несколькими способами:

1. Можно использовать в форме с помощью formData. Для этого в компоненте предусмотрен пропс id
2. Можно использовать через v-model.

Пропсы

• id — идентификатор поля ввода. Устанавливает id и name, которые используются в formData.

• label — плейсхолдер для поля. Задает параметр placeholder.

• placeholder — плейсхолдер для поля. Задает параметр placeholder.

• disabled — является ли поле выключенным. Задает параметр disabled.

• minlength — определяет минимальную длину инпута. Задает параметр minlength.

• maxlength — определяет максимальную длину инпута. Задает параметр maxlength.

• pattern — регулярное выражение, которому должно соответствовать значение инптуа. Задает параметр pattern.

• mask — определяет маску, которому будет соответствовать значение инпута. Задает параметр dataMaska.

• required — является ли поле обязательным для заполнения. Выставляет атрибут required.

  По умолчанию: true.

• type — тип поля.

  По умолчанию: text.

Стилизация

Для стилизации компонента подготовлены классы:

• utils-input-masked-container. Его стилизация влияет на контейнер, в котором находится текстовое поле.
• utils-input-masked-label. Его стилизация влияет на label.
• utils-input-masked-input. Его стилизация влияет на input.

При этом label и input можно стилизовать просто используя их селекторы.

INFO

Также для стилизации можно использовать глобальные классы, которые стилизуют все компоненты формы.

• utils-form-container. Его стилизация влияет на контейнер, в котором находится текстовое поле.
• utils-form-label. Его стилизация влияет на label.
• utils-form-input. Его стилизация влияет на поле ввода.

Использование

<script setup lang="ts">
const text = ref("")
</script>

<template>
  <UtilsInput
    v-model="text"
    id="test-field"
    mask="##-##"
    placeholder="Тестовый плейсхолдер"
  />
</template>