Input

Компонент <el-input> предназначен для ввода текста пользователем. Он поддерживает различные типы данных, стили, состояния и события, что делает его универсальным элементом для форм и интерфейсов.

Простейший пример использования:

<template>
  <el-input v-model="text" placeholder="Введите текст"></el-input>
</template>

<script>
export default {
  data() {
    return {
      text: ''
    };
  }
};
</script>

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

  • v-model – двусторонняя привязка значения.
  • placeholder – текст подсказки внутри поля.
  • type – определяет тип ввода: text, password, textarea, number и др.
  • disabled – делает поле недоступным для редактирования.
  • clearable – добавляет иконку для очистки поля.
  • show-password – для полей с типом password позволяет показывать/скрывать введённый текст.
  • maxlength – максимальная длина текста.
  • prefix-icon и suffix-icon – иконки перед и после ввода.

Виды Input

Обычный текстовый Input

Используется для ввода простого текста:

<el-input v-model="username" placeholder="Имя пользователя"></el-input>

Password Input с возможностью отображения

<el-input
  v-model="password"
  type="password"
  placeholder="Пароль"
  show-password
></el-input>

Number Input

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

<el-input
  v-model.number="age"
  type="number"
  :min="0"
  :max="120"
  placeholder="Возраст"
></el-input>

Textarea

Для многострочного текста:

<el-input
  type="textarea"
  v-model="description"
  :rows="4"
  placeholder="Введите описание"
></el-input>
  • rows – количество видимых строк.
  • autosize – автоматически подстраивает высоту под текст; можно передать объект { minRows, maxRows }.
<el-input
  type="textarea"
  v-model="comment"
  :autosize="{ minRows: 2, maxRows: 6 }"
  placeholder="Комментарий"
></el-input>

Состояния Input

Disabled и readonly

<el-input v-model="text" placeholder="Неактивное поле" disabled></el-input>
<el-input v-model="text" placeholder="Только для чтения" readonly></el-input>
  • disabled – блокирует полностью поле и делает его серым.
  • readonly – позволяет скопировать текст, но редактирование запрещено.

Clearable

Позволяет пользователю очистить поле одним кликом:

<el-input
  v-model="search"
  placeholder="Поиск"
  clearable
></el-input>

С иконками

Можно добавить иконки для визуального улучшения интерфейса:

<el-input
  v-model="email"
  placeholder="Email"
  prefix-icon="el-icon-message"
  suffix-icon="el-icon-check"
></el-input>
  • prefix-icon – иконка слева.
  • suffix-icon – иконка справа.

Валидация и события

Input поддерживает множество событий:

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

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

<el-input
  v-model="text"
  placeholder="Введите текст"
  @input="onInput"
  @change="onChange"
  @focus="onFocus"
  @blur="onBlur"
  clearable
  @clear="onClear"
></el-input>

<script>
export default {
  data() {
    return {
      text: ''
    };
  },
  methods: {
    onInput(value) {
      console.log('Input:', value);
    },
    onChange(value) {
      console.log('Change:', value);
    },
    onFocus() {
      console.log('Focus');
    },
    onBlur() {
      console.log('Blur');
    },
    onClear() {
      console.log('Cleared');
    }
  }
};
</script>

Встроенные слоты

Input поддерживает слоты для кастомизации:

  • prepend – контент перед полем.
  • append – контент после поля.
<el-input v-model="price" placeholder="Цена">
  <template #prepend>$</template>
  <template #append>.00</template>
</el-input>

Форматирование и управление числовыми данными

Использование модификаторов и фильтров:

<el-input
  v-model.number="amount"
  placeholder="Сумма"
></el-input>
  • Модификатор .number автоматически конвертирует ввод в число.
  • Можно комбинировать с formatter и parser при интеграции с внешними библиотеками.

Автокомплит

Input может работать с автозаполнением:

<el-input
  v-model="keyword"
  placeholder="Поиск пользователей"
  @input="fetchSuggestions"
  clearable
></el-input>

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

Эта структура <el-input> покрывает основные потребности: текст, пароль, числа, textarea, кастомизация через слоты и события, а также управление состояниями и валидацией. Она легко комбинируется с формами, кнопками и другими компонентами Element Plus для создания полноценных интерфейсов.

Оглавление