Steps

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

Основная структура

Базовая структура компонента выглядит следующим образом:

<template>
  <el-steps :active="activeStep" finish-status="success">
    <el-step title="Шаг 1" description="Описание шага 1"></el-step>
    <el-step title="Шаг 2" description="Описание шага 2"></el-step>
    <el-step title="Шаг 3" description="Описание шага 3"></el-step>
  </el-steps>
</template>

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

const activeStep = ref(1)
</script>

Пояснения:

  • el-steps — контейнер для всех шагов.
  • active — текущий активный шаг (индексация с 0).
  • finish-status — статус завершённого шага (success, error, warning).
  • el-step — отдельный шаг с заголовком title и необязательным описанием description.

Типы отображения

Компонент Steps поддерживает несколько вариантов отображения:

  1. Горизонтальный (horizontal) — стандартный вид, шаги располагаются слева направо.
  2. Вертикальный (vertical) — шаги располагаются сверху вниз.

Пример вертикального отображения:

<el-steps direction="vertical" :active="activeStep">
  <el-step title="Шаг 1" description="Первый этап"></el-step>
  <el-step title="Шаг 2" description="Второй этап"></el-step>
  <el-step title="Шаг 3" description="Третий этап"></el-step>
</el-steps>

Статусы шагов

Каждый шаг может иметь индивидуальный статус, который влияет на визуальное отображение:

  • wait — ожидает выполнения (по умолчанию).
  • process — выполняется в данный момент.
  • finish — выполнен успешно.
  • error — произошла ошибка.

Пример задания статусов:

<el-steps :active="1">
  <el-step title="Шаг 1" status="finish"></el-step>
  <el-step title="Шаг 2" status="process"></el-step>
  <el-step title="Шаг 3" status="wait"></el-step>
</el-steps>

Настройка иконок

Можно использовать пользовательские иконки для каждого шага через слот icon:

<el-steps :active="activeStep">
  <el-step title="Регистрация">
    <template #icon>
      <i class="el-icon-user"></i>
    </template>
  </el-step>
  <el-step title="Оплата">
    <template #icon>
      <i class="el-icon-credit-card"></i>
    </template>
  </el-step>
</el-steps>

Интервалы и выравнивание

Компонент Steps позволяет управлять расстоянием между шагами и их выравниванием:

  • align-center — выравнивание по центру.
  • space — можно задать через CSS кастомное расстояние между шагами.
  • Автоматическая подстройка ширины шагов: шаги будут равномерно распределены по контейнеру.

Пример центрирования:

<el-steps :active="2" align-center>
  <el-step title="Шаг 1"></el-step>
  <el-step title="Шаг 2"></el-step>
  <el-step title="Шаг 3"></el-step>
</el-steps>

Управление шагами программно

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

<template>
  <el-steps :active="activeStep">
    <el-step title="Шаг 1"></el-step>
    <el-step title="Шаг 2"></el-step>
    <el-step title="Шаг 3"></el-step>
  </el-steps>
  <el-button @click="nextStep">Следующий шаг</el-button>
</template>

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

const activeStep = ref(0)

function nextStep() {
  if (activeStep.value < 2) activeStep.value++
}
</script>

Использование с формами и процессами

Чаще всего Steps комбинируется с компонентами форм или интерактивными панелями (el-form, el-card) для создания пошаговых процессов:

<el-steps :active="activeStep" finish-status="success">
  <el-step title="Ввод данных"></el-step>
  <el-step title="Подтверждение"></el-step>
  <el-step title="Завершение"></el-step>
</el-steps>

<component :is="currentForm"></component>

<script setup>
import { ref, computed } from 'vue'
import StepOneForm from './StepOneForm.vue'
import StepTwoForm from './StepTwoForm.vue'
import StepThreeForm from './StepThreeForm.vue'

const activeStep = ref(0)

const currentForm = computed(() => {
  switch (activeStep.value) {
    case 0: return StepOneForm
    case 1: return StepTwoForm
    case 2: return StepThreeForm
  }
})
</script>

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

Дополнительные возможности

  • Ширина шага (step-width) — для задания фиксированной ширины каждого шага.
  • Слот title и description — для кастомизации заголовков и описаний с HTML или компонентами.
  • Адаптивность — Steps автоматически подстраиваются под ширину экрана, при малой ширине лучше использовать вертикальный режим.

Эти возможности делают компонент Steps гибким инструментом для визуализации процессов и улучшения UX в интерфейсах на Vue с использованием библиотеки Element Plus.

Оглавление