InputNumber

Компонент InputNumber в библиотеке Naive UI представляет собой специализированный числовой инпут, который позволяет пользователю вводить и изменять числовые значения с помощью клавиатуры или встроенных кнопок увеличения/уменьшения. Он поддерживает различные типы чисел, валидацию, ограничения диапазона и форматирование.

Базовый синтаксис компонента:

<n-input-number v-model:value="numValue" :min="0" :max="100" :step="1" />
  • v-model:value — двусторонняя привязка значения.
  • min и max — определяют диапазон допустимых значений.
  • step — шаг изменения значения при нажатии кнопок или стрелок клавиатуры.

Привязка и управление значением

Использование v-model:value обеспечивает реактивное обновление переменной в компоненте Vue. Любые изменения через UI сразу отражаются в переменной, а программное изменение переменной обновляет UI. Это делает InputNumber удобным для форм, где числовые значения должны быть синхронизированы с состоянием приложения.

<template>
  <n-input-number v-model:value="counter" :step="5" />
  <p>Текущее значение: {{ counter }}</p>
</template>

<script setup>
import { ref } from 'vue'

const counter = ref(10)
</script>

В этом примере кнопки увеличения и уменьшения будут менять counter с шагом 5.

Ограничения диапазона и шаг

Компонент поддерживает строгие ограничения:

  • min — минимальное допустимое значение.
  • max — максимальное допустимое значение.
  • step — шаг изменения числа.

Если значение выходит за пределы min или max, компонент автоматически корректирует его. Например, если min=0 и пользователь вводит -5, значение автоматически станет 0.

Дополнительно можно управлять точностью числа с помощью precision:

<n-input-number v-model:value="price" :step="0.01" :precision="2" />
  • precision ограничивает количество знаков после запятой, что особенно полезно для денежных значений.

Форматирование отображения

InputNumber поддерживает форматирование отображаемого значения через слот formatter или функцию parser.

<n-input-number
  v-model:value="weight"
  :formatter="formatWeight"
  :parser="parseWeight"
/>

<script setup>
import { ref } from 'vue'

const weight = ref(50)

function formatWeight(value) {
  return `${value} кг`
}

function parseWeight(value) {
  return Number(value.replace(' кг', ''))
}
</script>
  • formatter определяет, как значение отображается в поле.
  • parser преобразует отображаемое значение обратно в число для внутреннего состояния.

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

Кнопки увеличения и уменьшения

По умолчанию InputNumber отображает стрелки для изменения значения. Управление ими возможно через следующие свойства:

  • show-button — включение/отключение кнопок.
  • button-position — расположение кнопок ("right" или "inner").
  • disabled — блокирует любые изменения.
<n-input-number
  v-model:value="quantity"
  :show-button="true"
  button-position="inner"
/>

Использование button-position="inner" делает интерфейс более компактным, помещая кнопки внутрь поля ввода.

События

InputNumber предоставляет несколько событий для отслеживания действий пользователя:

  • update:value — вызывается при изменении значения.
  • change — срабатывает после завершения ввода.
  • blur и focus — стандартные события для контроля фокуса.

Пример использования события change:

<n-input-number
  v-model:value="age"
  @change="handleAgeChange"
/>

<script setup>
function handleAgeChange(value) {
  console.log('Новое значение возраста:', value)
}
</script>

Работа с реактивными формами

В интеграции с формами Naive UI InputNumber удобно использовать с n-form и n-form-item. Можно добавлять валидацию и сообщения об ошибках.

<n-form :model="formData">
  <n-form-item label="Количество" path="quantity">
    <n-input-number v-model:value="formData.quantity" :min="1" :max="100" />
  </n-form-item>
</n-form>

<script setup>
import { reactive } from 'vue'

const formData = reactive({
  quantity: 10
})
</script>
  • path указывает на свойство объекта модели.
  • Компонент автоматически участвует в валидации формы.

Дополнительные возможности

  1. Динамический диапазон: min и max могут быть реактивными переменными, позволяя менять допустимый диапазон в зависимости от состояния приложения.
  2. Кастомизация стилей: через class и style можно менять внешний вид компонента.
  3. Состояние readonly и disabled: блокировка изменения значения, но с сохранением отображения.
  4. Поддержка клавиатуры: стрелки вверх/вниз увеличивают/уменьшают значение на шаг step.

Советы по использованию

  • Для денежных значений и дробей всегда используйте precision.
  • Если нужно ограничить ввод строго цифрами, комбинируйте parser и проверку через change.
  • Для больших форм рекомендуется использовать реактивные объекты и n-form-item, чтобы упростить валидацию и управление состоянием.
  • Для компактного UI используйте button-position="inner" и скрывайте стрелки при необходимости.

Компонент InputNumber обеспечивает гибкость и точность работы с числами, оставаясь при этом простым в интеграции с формами и реактивным состоянием Vue.

Оглавление