InputNumber (счётчик)

Поле ввода чисел. Поддерживает границы min/max, пошаговое изменение step с кратностью stepStrictly, количество знаков после запятой precision, отображение кнопок плюс/минус и три размера; клавиши ↑/↓ также меняют значение шагом.

Счётчик

<template>
  <div class="demo-col" style="gap: 20px">
    <div class="demo-row" style="gap: 16px; flex-wrap: wrap; align-items: center">
      <LhInputNumber v-model="count" :min="1" :max="99" :step="1" placeholder="Количество" name="count" />
      <span class="demo-note">min=1 max=99, контролируемое значение: {{ count }}</span>
    </div>
    <div class="demo-row" style="gap: 16px; flex-wrap: wrap; align-items: center">
      <LhInputNumber v-model="price" :step="0.5" :precision="2" :min="0" />
      <span class="demo-note">step=0.5 precision=2: {{ price }}</span>
    </div>
    <div class="demo-row" style="gap: 16px; flex-wrap: wrap; align-items: center">
      <LhInputNumber v-model="strict" :step="10" step-strictly />
      <span class="demo-note">stepStrictly: после потери фокуса значение округляется до кратного 10</span>
    </div>
    <div class="demo-row" style="gap: 16px; flex-wrap: wrap; align-items: center">
      <LhInputNumber v-model="noControls" :controls="false" placeholder="Без степпера" />
      <LhInputNumber v-model="disabledVal" disabled />
    </div>
    <div class="demo-row" style="gap: 16px; flex-wrap: wrap; align-items: center">
      <LhInputNumber v-model="sized" size="small" />
      <LhInputNumber v-model="sized" size="medium" />
      <LhInputNumber v-model="sized" size="large" />
    </div>
    <p class="demo-note">controls=false скрывает кнопки плюс/минус; стрелки (↑/↓) также меняют значение шагом, когда поле в фокусе.</p>
  </div>
</template>

<script>
export default {
  data: () => ({
    count: 6,
    price: 12.5,
    strict: 20,
    noControls: undefined,
    disabledVal: 3,
    sized: 8,
  }),
}
</script>

Props

Проп	Описание	Тип	По умолчанию
v-model	Привязанное значение (model: modelValue/input)	number \| null	null
min	Минимум (при меньшем значении возвращается min)	number	—
max	Максимум (при большем значении возвращается max)	number	—
step	Шаг изменения	number	1
stepStrictly	Вводимое значение должно быть кратно step (выравнивание при потере фокуса)	boolean	false
precision	Количество знаков после запятой (при превышении округляется)	number	—
controls	Показывать кнопки плюс/минус	boolean	true
size	Размер	'small' \| 'medium' \| 'large'	'medium'
disabled	Отключение	boolean	false
placeholder	Текст-плейсхолдер	string	—
name	Нативный name	string	—
sx	Проп sx для быстрого макета	—	—

Events

Событие	Описание	Параметры обратного вызова
input	Событие v-model	(val)
change	Срабатывает при изменении значения	(val)

Доступность

Кнопки плюс/минус — нативные button; при фокусе на поле шаг меняется клавишами ↑/↓; внутри LhFormItem при ошибке валидации устанавливается aria-invalid.