Индикатор выполнения

Создание интерактивного и визуально приятного индикатора выполнения (Stepper) с помощью обычного JavaScript может потребовать много кода. Vue.js значительно упрощает эту задачу! Его реактивность и декларативный подход позволяют создать динамический компонент, где состояние интерфейса (прогресс, активные шаги) автоматически синхронизируется с данными. Ниже на этой странице представлен готовый индикатор и вы можете изучить его чистый и понятный код.

<div id="app">
  <div class="progress-container">
    <div class="progress">
      <div class="progress__scale" :style="{inlineSize: `${calcScale}%`}"></div>
    </div>
    <div class="circle" :class="{'circle--active': index <= step_current-1}" v-for="(step,index) in steps" :key="index">
      {{ index += 1 }}
    </div>
  </div>
  <div class="app-btns">
    <button class="app-btn" :class="{'app-btn--active': step_current > 1}" :disabled="step_current === 1" @click.prevent="handlePrev">Пред.</button>
    <button class="app-btn" :class="{'app-btn--active': step_current < steps}" :disabled="step_current === steps" @click.prevent="handleNext">След.</button>
  </div>
</div>

#app {
  --tr: .5s ease-in-out;
  width: min(400px, 100%);
}
.progress-container {
  position: relative;
  display: flex;
  justify-content: space-between;
  margin-block-end: 30px;
}
.progress {
  position: absolute;
  z-index: -1;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  height: 6px;
  background-color: #D7DBDD;
}
.progress__scale {
  position: absolute;
  inset: 0;
  width: 0%;
  background-color: #3498DB;
  transition: width var(--tr);
}
.circle {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  background-color: #fff;
  border: 3px solid #D7DBDD;
  border-radius: 100vw;
  transition: border-color var(--tr);
}
.circle--active {
  border-color: #3498DB;
}
.app-btns {
  display: flex;
  justify-content: center;
  gap: 0 30px;
}
.app-btn {
  width: 100px;
  height: 40px;
  color: #fff;
  background-color: #D7DBDD;
  border: none;
  border-radius: 10px;
  cursor: not-allowed;
  transition: background-color var(--tr);
}
.app-btn--active {
  background-color: #3498DB;
  cursor: pointer;
}

const {createApp,ref,computed} = Vue
createApp({
    setup() {    
        let step_current = ref(1)
        const steps = ref(4)
        let calcScale = computed(()=>{
            return 100 / (steps.value - 1) * (step_current.value - 1)
        })
        function handlePrev() {
        if (step_current.value > 1) {				
            return step_current.value--
        }
    }
        function handleNext() {
        if (step_current.value < steps.value) {				
            return step_current.value++
        }
    }
        return {step_current, steps, calcScale, handleNext, handlePrev}
    }        
}).mount('#app')

Внимание! Представленный код — это готовый компонент, но для его работы на странице должен быть установлен и подключен фреймворк Vue. Если вы начинающий разработчик, просто добавьте строку
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
в раздел <head> вашего HTML, и всё заработает.

Работа индикатора выполнения на Vue.js

Код, представленный выше — наглядный пример мощи и простоты Vue.js. Давайте разберем его логику.

1. Структура и реактивность

В основе лежат реактивные переменные, объявленные с помощью ref():

step_current — отслеживает текущий активный шаг.
steps — общее количество шагов.

При изменении step_current Vue автоматически обновляет все части интерфейса, которые от него зависят.

2. Динамическое отображение прогресса

Сердце индикатора — вычисляемое свойство calcScale. Оно динамически рассчитывает ширину заполненной части шкалы (progress__scale) в процентах, основываясь на текущем шаге и общем количестве шагов. Это происходит автоматически при каждом изменении step_current.

3. Визуализация активных шагов

Для отображения пройденных шагов используется директива v-for для генерации кружков и динамический класс :class. Условие {'circle--active': index <= step_current-1} подкрашивает границу кружка в синий цвет, если его индекс меньше или равен текущему шагу.

4. Управление состоянием кнопок

Кнопки Пред. и След. также реактивны. Их активность и возможность нажатия (disabled) зависят от текущего шага. Например, кнопка Пред. неактивна, когда мы на первом шаге. Логика переключения шагов инкапсулирована в простых функциях handlePrev и handleNext.

Готовы внедрить современные UI-компоненты в ваш проект?

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

Вашего бренда — идеально вписывается в дизайн-систему
Бизнес-логики — решает конкретные задачи вашего проекта
Пользовательского опыта — обеспечивает интуитивно понятное взаимодействие
Технической надежности — стабильно работает на всех устройствах

Не тратьте время на поиск готовых решений!

Наша веб-студия разработает для вас уникальные, качественные и полностью адаптивные UI-компоненты, которые повысят конверсию и улучшат пользовательский опыт.

Предыдущий Следующий