Маски и форматирование

Библиотека Naive UI предоставляет мощные возможности для работы с вводом данных, включая маски и форматирование, что позволяет создавать интуитивно понятные и безопасные формы. Основной инструмент для этого — компонент n-input, поддерживающий кастомизацию отображения значений и обработку ввода через функции форматирования и парсинга.

Форматирование с помощью formatter и parser

Компонент n-input поддерживает два ключевых свойства для работы с преобразованием данных:

  • formatter — функция, которая преобразует внутреннее значение в отображаемый формат.
  • parser — функция, которая возвращает исходное значение из форматированного.

Пример: форматирование числового ввода с разделением тысячных:

import { ref } from 'vue';
import { NInput } from 'naive-ui';

const value = ref(1234567);

<NInput
  v-model:value="value"
  :formatter="val => val.toLocaleString()"
  :parser="val => Number(val.replace(/,/g, ''))"
/>

В этом примере formatter отображает число с разделителями тысяч, а parser удаляет их при сохранении значения.

Ключевой момент: использование этих функций позволяет отделить внутренние данные от визуального представления, что особенно полезно для финансовых, телефонных или датовых полей.

Маски для ввода

Naive UI не имеет встроенного механизма масок, как, например, vue-the-mask, но маски можно реализовать через formatter/parser или через события on-update:value и on-input.

Пример маски для телефона формата (XXX) XXX-XXXX:

import { ref } from 'vue';
import { NInput } from 'naive-ui';

const phone = ref('');

function formatPhone(value) {
  const digits = value.replace(/\D/g, '').slice(0, 10);
  const part1 = digits.slice(0, 3);
  const part2 = digits.slice(3, 6);
  const part3 = digits.slice(6, 10);
  return part1 ? `(${part1})${part2 ? ` ${part2}` : ''}${part3 ? `-${part3}` : ''}` : '';
}

function parsePhone(value) {
  return value.replace(/\D/g, '');
}

<NInput
  v-model:value="phone"
  :formatter="formatPhone"
  :parser="parsePhone"
/>

Важный аспект: маска здесь не блокирует ввод, а преобразует отображение в реальном времени, сохраняя только цифры внутри значения.

Работа с датами и временем

Для полей с датой или временем форматирование также можно реализовать через formatter и parser, либо использовать готовые компоненты n-date-picker и n-time-picker. Пример ввода даты с пользовательским форматом DD/MM/YYYY:

import { ref } from 'vue';
import { NInput } from 'naive-ui';

const dateValue = ref('');

function formatDate(value) {
  if (!value) return '';
  const date = new Date(value);
  return `${String(date.getDate()).padStart(2, '0')}/${String(date.getMonth() + 1).padStart(2, '0')}/${date.getFullYear()}`;
}

function parseDate(value) {
  const [day, month, year] = value.split('/');
  return new Date(`${year}-${month}-${day}`).toISOString();
}

<NInput
  v-model:value="dateValue"
  :formatter="formatDate"
  :parser="parseDate"
/>

Такое решение позволяет визуально показывать дату в удобном формате, сохраняя при этом корректное внутреннее представление.

Использование on-update:value для динамического форматирования

Иногда нужно динамически контролировать ввод без использования formatter/parser. Для этого применяется событие on-update:value:

<NInput
  v-model:value="value"
  @update:value="val => value = val.replace(/\D/g, '')"
/>

Это позволяет реализовать фильтрацию вводимых символов в реальном времени, например, для числовых или алфавитных полей.

Комбинация с валидацией

Маски и форматирование часто используются вместе с системой валидации Naive UI. Например, для поля с суммой можно проверять, что число больше нуля, независимо от визуального форматирования:

const rules = [
  {
    validator: (rule, value) => value > 0,
    message: 'Сумма должна быть больше нуля',
    trigger: 'blur'
  }
];

При этом formatter/parser гарантируют, что значение, проверяемое валидатором, всегда будет числом, а не строкой с разделителями.

Практические рекомендации

  • Использовать formatter/parser для простого и стабильного преобразования — это основной подход для Naive UI.
  • Для сложных масок с динамическим вводом лучше комбинировать с событием on-update:value.
  • Отделять визуальное отображение от внутреннего значения — это облегчает последующую обработку и валидацию.
  • Для дат, валют и телефонов следует заранее определить стандартизированный внутренний формат, чтобы избежать ошибок при хранении и передаче данных.

Маски и форматирование в Naive UI дают гибкий инструмент для создания удобных и безопасных форм, сочетая визуальное удобство с правильной обработкой данных.

Оглавление