Input Number

Input Number — это специализированный компонент для ввода числовых значений с возможностью управления при помощи кнопок увеличения и уменьшения значения. Он обеспечивает удобный способ ввода чисел с ограничениями, форматированием и обработкой событий.

Подключение и базовое использование

Для использования компонента необходимо импортировать его из библиотеки Element Plus:

import { ElInputNumber } from 'element-plus';

В шаблоне Vue компонент используется следующим образом:

<el-input-number v-model="value" :min="1" :max="10" :step="1"></el-input-number>
export default {
  data() {
    return {
      value: 1
    };
  }
};

Ключевые свойства:

  • v-model — двустороннее связывание с переменной.
  • min — минимальное значение.
  • max — максимальное значение.
  • step — шаг изменения значения при клике на стрелки.

Настройка шага и ограничения диапазона

Step позволяет задать величину изменения при использовании стрелок:

<el-input-number v-model="value" :min="0" :max="100" :step="5"></el-input-number>

Min и Max предотвращают выход значения за пределы допустимого диапазона:

<el-input-number v-model="value" :min="10" :max="50"></el-input-number>

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

Форматирование и управление точностью

Для чисел с плавающей запятой важны свойства:

  • precision — количество знаков после запятой.
  • step-strictly — ограничение изменения только шагом.
<el-input-number
  v-model="value"
  :min="0"
  :max="10"
  :step="0.5"
  :precision="2"
  step-strictly>
</el-input-number>

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

События компонента

Компонент Input Number поддерживает несколько важных событий:

  • change — срабатывает при изменении значения.
  • input — срабатывает при каждом вводе пользователем.
  • blur — срабатывает при потере фокуса.
  • focus — срабатывает при получении фокуса.

Пример обработки события change:

<el-input-number v-model="value" @change="handleChange"></el-input-number>
methods: {
  handleChange(newValue) {
    console.log('Новое значение:', newValue);
  }
}

Настройка кнопок увеличения и уменьшения

По умолчанию компонент отображает стрелки управления. Можно настроить их видимость через controls:

<el-input-number v-model="value" :controls="false"></el-input-number>

Свойство controls-position управляет расположением кнопок:

<el-input-number v-model="value" controls-position="right"></el-input-number>

Интеграция с формами

Input Number удобно использовать в сочетании с компонентом el-form для валидации:

<el-form :model="form">
  <el-form-item label="Возраст" prop="age">
    <el-input-number v-model="form.age" :min="1" :max="100"></el-input-number>
  </el-form-item>
</el-form>
export default {
  data() {
    return {
      form: {
        age: 25
      }
    };
  }
};

Можно использовать правила валидации через el-form-item:

rules: {
  age: [
    { required: true, message: 'Введите возраст', trigger: 'blur' },
    { type: 'number', min: 1, max: 100, message: 'Возраст должен быть от 1 до 100', trigger: 'blur' }
  ]
}

Работа с клавиатурой

Компонент поддерживает навигацию через стрелки клавиатуры:

  • Arrow Up — увеличить значение на шаг.
  • Arrow Down — уменьшить значение на шаг.

Можно отключить эту функциональность с помощью свойства keyboard:

<el-input-number v-model="value" :keyboard="false"></el-input-number>

Динамическое управление свойствами

Все свойства можно изменять динамически через реактивные данные:

<el-input-number
  v-model="value"
  :min="dynamicMin"
  :max="dynamicMax"
  :step="dynamicStep">
</el-input-number>
data() {
  return {
    value: 5,
    dynamicMin: 1,
    dynamicMax: 20,
    dynamicStep: 2
  };
}

Изменение dynamicMin, dynamicMax или dynamicStep моментально отражается на поведении компонента.

Стилизация и кастомизация

Input Number наследует стили Element Plus, но можно изменять внешний вид через CSS-переменные:

.el-input-number .el-input__inner {
  border-color: #409EFF;
  border-radius: 8px;
}
.el-input-number .el-input-number__decrease,
.el-input-number .el-input-number__increase {
  background-color: #f0f9ff;
}

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

Примеры комбинирования с другими компонентами

Компонент хорошо сочетается с el-slider, el-form, el-button для создания интерактивных интерфейсов, где число можно вводить и регулировать несколькими способами. Например, использование Input Number для управления диапазоном:

<el-slider v-model="value" :min="0" :max="100"></el-slider>
<el-input-number v-model="value" :min="0" :max="100"></el-input-number>

Взаимосвязь через общий v-model обеспечивает синхронизацию между ползунком и числовым вводом.

Эти возможности делают компонент Input Number гибким инструментом для точного и удобного ввода числовых данных в интерфейсах на Vue с библиотекой Element Plus.

Оглавление