События и их сигнатуры

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

Основные принципы работы событий

  1. Регистрация событий через директиву v-on или сокращение @ События компонентов Element Plus обрабатываются стандартным способом Vue 3:

    <el-button @click="handleClick">Нажми меня</el-button>

<script>
export default {
  methods: {
    handleClick(event) {
      console.log('Кнопка нажата', event);
    }
  }
}
</script>

    Здесь click — это событие компонента el-button. Оно передает объект события DOM как первый аргумент.

  2. События могут передавать специфические аргументы Многие компоненты Element Plus отправляют не просто объект события, а набор данных, характерных для компонента. Например, el-select передает выбранное значение:

    <el-select v-model="value" @change="handleChange">
  <el-option label="Option 1" value="1"></el-option>
  <el-option label="Option 2" value="2"></el-option>
</el-select>

<script>
export default {
  data() {
    return { value: '' };
  },
  methods: {
    handleChange(selectedValue) {
      console.log('Выбрано значение', selectedValue);
    }
  }
}
</script>

    В этом случае сигнатура события change — (value: any) => void.

События ввода и их сигнатуры

  • input: используется для синхронизации с v-model. Событие отправляет новое значение компонента. Пример:

    <el-input v-model="text" @input="onInput"></el-input>

methods: {
  onInput(newValue) {
    console.log('Новое значение input:', newValue);
  }
}

  • focus и blur: передают объект события DOM. Полезны для управления состоянием фокуса.

События выбора и изменения

  1. Select / Dropdown / Cascader Основные события:

    • change — значение изменилось. Сигнатура: (value) => void
    • visible-change — изменение состояния раскрытия списка. Сигнатура: (visible: boolean) => void
    • remove-tag (только для multiple select) — удаление тега. Сигнатура: (removedValue) => void

  2. Checkbox / Radio / Switch

    • change — передает новое значение (true/false для Switch, значение для Radio и Checkbox).
    • focus / blur — стандартные события DOM.

События таблицы (el-table)

  • selection-change — изменение выбранных строк. Сигнатура: (selectedRows: Array) => void
  • sort-change — сортировка столбцов. Сигнатура: (sort: { column, prop, order }) => void
  • filter-change — применение фильтров. Сигнатура: (filters: Object) => void
  • row-click / row-dblclick / row-contextmenu — взаимодействие с конкретной строкой. Сигнатуры: (row, column, event) => void

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

<el-table :data="tableData" @selection-change="onSelectionChange">
  <el-table-column type="selection"></el-table-column>
  <el-table-column prop="name" label="Имя"></el-table-column>
</el-table>

methods: {
  onSelectionChange(selectedRows) {
    console.log('Выбранные строки:', selectedRows);
  }
}

События форм и валидации

  • validate — используется при проверке формы (el-form). Сигнатура: (valid: boolean, fields: Object) => void
  • submit / reset — перехватывают отправку и сброс формы.

Пример:

<el-form :model="form" @submit.prevent="onSubmit">
  <el-form-item label="Имя">
    <el-input v-model="form.name"></el-input>
  </el-form-item>
</el-form>

methods: {
  onSubmit() {
    this.$refs.form.validate((valid) => {
      if (valid) console.log('Форма валидна');
      else console.log('Ошибки в форме');
    });
  }
}

События модальных и всплывающих компонентов

  • Dialog (el-dialog)

    • open / opened — модальное окно открылось. Сигнатура: () => void
    • close / closed — окно закрыто.
    • before-close — перехватывает попытку закрытия, позволяет отменить. Сигнатура: (done: Function) => void

  • Tooltip / Popover / Dropdown

    • show / hide — изменение видимости.
    • visible-change — передает булево значение видимости.

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

  • Upload (el-upload)

    • change — изменение списка файлов. (file, fileList) => void
    • success — успешная загрузка файла. (response, file, fileList) => void
    • error — ошибка загрузки. (err, file, fileList) => void
    • remove — удаление файла из списка. (file, fileList) => void

  • Progress (el-progress)

    • finish — прогресс достиг 100%. (percentage: number) => void

Общие рекомендации по работе с событиями

  1. Использовать явные методы вместо inline-функций для лучшей читаемости.
  2. Следить за сигнатурами: некоторые события передают несколько аргументов, важно правильно их распаковать.
  3. Комбинировать с модификаторами Vue (.stop, .prevent) для управления поведением DOM-событий.
  4. События видимости и фокуса часто необходимы для управления состоянием UI без вмешательства в данные модели.

Понимание и корректное использование событий Element Plus позволяет создавать динамичные и отзывчивые интерфейсы, где каждый компонент взаимодействует с данными и другими элементами приложения без лишней сложности.

Оглавление