Управление фокусом

В библиотеке Element Plus управление фокусом является важной частью работы с интерактивными компонентами. Фокус определяет, какой элемент интерфейса активен в текущий момент, и влияет на обработку клавиатурных событий, визуальные состояния и доступность приложения.

Фокусировка на элементах

Большинство интерактивных компонентов Element Plus предоставляют методы для управления фокусом. Ключевые методы:

  • focus() — переводит элемент в состояние активного фокуса.
  • blur() — снимает фокус с элемента.
  • autofocus — атрибут, автоматически устанавливающий фокус при рендеринге компонента.

Пример с компонентом ElInput:

<template>
  <el-input ref="inputRef" placeholder="Введите текст"></el-input>
  <el-button @click="setFocus">Фокус на поле</el-button>
</template>

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

export default {
  setup() {
    const inputRef = ref(null);

    const setFocus = () => {
      inputRef.value.focus();
    };

    return { inputRef, setFocus };
  },
};
</script>

В этом примере кнопка переводит фокус на поле ввода, используя метод focus() компонента.

Управление фокусом при модальных окнах

Компоненты ElDialog, ElDrawer и ElPopover автоматически управляют фокусом для улучшения доступности:

  • ElDialog переводит фокус на первый интерактивный элемент при открытии.
  • При закрытии диалога фокус возвращается к элементу, вызвавшему его открытие.
  • Можно переопределить это поведение с помощью :before-close и методов focus()/blur() для конкретного элемента.

Пример диалога с кастомной фокусировкой:

<el-dialog :visible.sync="dialogVisible" :before-close="handleClose">
  <el-input ref="dialogInput" placeholder="Введите данные"></el-input>
</el-dialog>

<script>
import { ref, nextTick } from 'vue';

export default {
  setup() {
    const dialogVisible = ref(false);
    const dialogInput = ref(null);

    const handleClose = (done) => {
      dialogVisible.value = false;
      nextTick(() => {
        dialogInput.value.blur();
      });
      done();
    };

    return { dialogVisible, dialogInput, handleClose };
  },
};
</script>

Фокус и клавиатурная навигация

Element Plus поддерживает управление фокусом через клавиатуру. В таблицах (ElTable), списках (ElSelect) и меню (ElMenu) используются следующие принципы:

  • tabindex управляет порядком фокусировки.
  • Стрелки вверх/вниз позволяют перемещаться между элементами.
  • Enter или Space активируют выбранный элемент.

Для кастомных компонентов можно использовать директиву v-focus:

<script>
export default {
  directives: {
    focus: {
      mounted(el) {
        el.focus();
      },
    },
  },
};
</script>

<template>
  <input v-focus placeholder="Автофокус">
</template>

Управление фокусом в формах

В формах Element Plus (ElForm, ElFormItem) важно правильно управлять фокусом при валидации:

  • validate и validateField автоматически подсвечивают поля с ошибками.
  • Для перехода к первому невалидному полю используется метод focus() на компоненте ввода:
const validateForm = async () => {
  try {
    await formRef.value.validate();
  } catch (errors) {
    const firstErrorField = errors[0].field;
    const el = formRef.value.fields.find(f => f.prop === firstErrorField);
    el.el.focus();
  }
};

Программное управление фокусом

Для динамических интерфейсов часто необходимо программно перемещать фокус между компонентами:

  • nextTick используется для гарантии рендеринга перед вызовом focus().
  • ref обеспечивает доступ к методам компонентов.
  • Можно создавать цепочки фокусировки для шаговых форм или мастер-страниц.

Пример последовательной фокусировки:

const stepRefs = [step1Ref, step2Ref, step3Ref];

const focusNext = (currentIndex) => {
  const nextIndex = currentIndex + 1;
  if (nextIndex < stepRefs.length) {
    nextTick(() => stepRefs[nextIndex].value.focus());
  }
};

Особенности фокусировки в кастомных компонентах

При создании собственных компонентов на основе Element Plus следует учитывать:

  • Компонент должен корректно обрабатывать tabindex и события keydown.
  • Методы focus() и blur() должны быть доступны через ref.
  • Использование autofocus облегчает первоначальное выделение элемента.
  • Для компонентов с динамическим контентом (ElPopover, ElTooltip) важно вызывать focus() после рендеринга через nextTick.

Важные моменты

  • Доступность: корректная фокусировка обеспечивает поддержку экранных читалок.
  • Плавный UX: пользователи должны видеть визуальные индикаторы фокуса.
  • Контроль через методы: предпочтительно использовать focus()/blur(), а не напрямую работать с DOM.

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

Оглавление