Loading

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

Использование сервиса Loading

Для использования сервиса Loading необходимо импортировать его из библиотеки:

import { ElLoading } from 'element-plus';

Создание глобального индикатора загрузки осуществляется с помощью метода ElLoading.service():

const loadingInstance = ElLoading.service({
  lock: true,
  text: 'Загрузка данных...',
  spinner: 'el-icon-loading',
  background: 'rgba(0, 0, 0, 0.7)',
});

Параметры конфигурации:

  • lock (Boolean) — блокирует прокрутку страницы при отображении загрузки.
  • text (String) — текст, отображаемый под индикатором.
  • spinner (String) — иконка, используемая для анимации загрузки (по умолчанию 'el-icon-loading').
  • background (String) — цвет и прозрачность фона индикатора.

Для закрытия индикатора используется метод close():

loadingInstance.close();

Локальный Loading на элементах

Компонент может быть применён к конкретным элементам через директиву v-loading. Это удобно для отображения загрузки внутри определённого блока, без блокировки всей страницы:

<template>
  <div v-loading="loading" class="loading-box">
    Контент загружается...
  </div>
</template>

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

export default {
  setup() {
    const loading = ref(true);

    setTimeout(() => {
      loading.value = false;
    }, 3000);

    return { loading };
  }
}
</script>

<style>
.loading-box {
  height: 200px;
  border: 1px solid #dcdfe6;
  position: relative;
}
</style>

Особенности директивы v-loading:

  • Привязка к логическому состоянию (true/false) через реактивную переменную.
  • Возможность указания текста загрузки через аргумент: v-loading="loading" :loading-text="'Загрузка...'".
  • Автоматическое создание локального контейнера с классом .el-loading-mask.

Слоты и кастомизация

В Element Plus можно кастомизировать внешний вид индикатора. Используется параметр customClass для задания собственного CSS класса:

const loadingInstance = ElLoading.service({
  customClass: 'my-loading',
  text: 'Подождите, идет процесс...'
});

В CSS можно определить стиль:

.my-loading .el-loading-text {
  color: #409eff;
  font-size: 18px;
}

.my-loading .el-loading-spinner {
  border-color: #409eff;
}

Примеры использования в асинхронных операциях

Пример с асинхронным запросом:

import { ElLoading } from 'element-plus';
import axios from 'axios';

const loadingInstance = ElLoading.service({
  lock: true,
  text: 'Загрузка данных...',
});

axios.get('/api/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  })
  .finally(() => {
    loadingInstance.close();
  });

В данном примере индикатор будет отображаться до завершения запроса к API.

Сочетание с компонентами UI

Компонент Loading можно использовать совместно с таблицами, формами и другими контейнерами:

<el-table :data="tableData" v-loading="loading">
  <el-table-column prop="name" label="Имя"></el-table-column>
  <el-table-column prop="age" label="Возраст"></el-table-column>
</el-table>

При установке loading = true таблица будет покрыта маской с индикатором загрузки.

Настройка позиции и размера

Параметры lock, text, spinner и background можно комбинировать с опцией target для позиционирования:

ElLoading.service({
  target: document.querySelector('.specific-container'),
  text: 'Идет обработка...',
  background: 'rgba(255, 255, 255, 0.6)',
});
  • target — DOM-элемент, на котором будет отображаться локальный индикатор.
  • Если target не указан, индикатор создается на всём экране.

Асинхронное управление состоянием

Для сложных сценариев загрузки можно использовать реактивные переменные и watch-эффекты для управления индикатором:

import { ref, watch } from 'vue';
import { ElLoading } from 'element-plus';

const loading = ref(false);
let loadingInstance = null;

watch(loading, (newValue) => {
  if (newValue) {
    loadingInstance = ElLoading.service({ text: 'Загрузка...' });
  } else {
    loadingInstance?.close();
  }
});

Такой подход позволяет автоматически показывать или скрывать индикатор при изменении состояния приложения.

Советы по оптимизации UX

  • Использовать локальные индикаторы вместо глобальных для блокирования только части интерфейса.
  • Подбирать текст загрузки информативным, чтобы пользователь понимал, что происходит.
  • Избегать длительного блокирования интерфейса без обратной связи — комбинировать с прогресс-барами или анимациями.

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

Оглавление