UtilsPhone

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

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

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

Пропсы

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

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

• label — заголовок для поля. Задает параметр label.

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

  По умолчанию: +7 999 888-77-66.

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

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

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

Стилизация

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

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

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

INFO

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

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

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

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

<template>
  <UtilsPhone
    v-model="phone"
  />
</template>