Spin и загрузка

Компонент Spin в библиотеке Naive UI предназначен для визуализации процесса загрузки или ожидания выполнения какой-либо операции. Он является универсальным индикатором загрузки, который можно интегрировать с различными элементами интерфейса и управлять его отображением через состояние приложения.

Основные свойства компонента Spin

show – логическое значение (true или false), определяющее, отображается ли индикатор загрузки.
```
<n-spin :show="isLoading" />
```
В данном примере индикатор будет виден только тогда, когда переменная isLoading равна true.
size – размер индикатора. Поддерживаются значения: 'small', 'medium', 'large'.
```
<n-spin :show="true" size="large" />
```
overlay – определяет, будет ли индикатор отображаться поверх содержимого как полупрозрачный слой.
```
<n-spin :show="isLoading" overlay>
  <div>Основное содержимое</div>
</n-spin>
```
Если overlay включен, пользователь видит затемнение вокруг содержимого, сигнализируя, что действие временно недоступно.
tip – текстовая подсказка под индикатором. Может использоваться для информирования пользователя о процессе.
```
<n-spin :show="isLoading" tip="Загрузка данных..." />
```

Интеграция с состоянием Vue

Компонент Spin идеально сочетается с реактивными состояниями во Vue. Наиболее часто используется комбинация с ref или reactive для управления показом индикатора:

import { ref } from 'vue'

export default {
  setup() {
    const isLoading = ref(false)

    const fetchData = async () => {
      isLoading.value = true
      try {
        const response = await fetch('/api/data')
        const data = await response.json()
        console.log(data)
      } finally {
        isLoading.value = false
      }
    }

    return { isLoading, fetchData }
  }
}

В шаблоне:

<n-button @click="fetchData">Загрузить данные</n-button>
<n-spin :show="isLoading" overlay tip="Идёт загрузка..." />

При нажатии на кнопку индикатор Spin появляется поверх содержимого и исчезает после завершения асинхронной операции.

Встраивание Spin внутрь элементов интерфейса

Spin можно использовать не только как отдельный компонент, но и оборачивать им другие элементы:

<n-spin :show="isLoading">
  <n-card title="Профиль пользователя">
    <p>Имя: Иван</p>
    <p>Возраст: 28</p>
  </n-card>
</n-spin>

В данном примере весь блок с карточкой пользователя будет покрыт индикатором загрузки. При этом свойства overlay и tip позволяют сделать визуализацию более информативной.

Использование с таблицами и списками

При работе с таблицами или списками часто требуется показывать индикатор загрузки именно в области данных, а не всего интерфейса. В Naive UI это реализуется с помощью вложения Spin в таблицу:

<n-spin :show="tableLoading">
  <n-data-table :columns="columns" :data="rows" />
</n-spin>

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

Динамическое управление Spin через события

Для сложных интерфейсов полезно управлять Spin через глобальные события или центральное состояние:

import { reactive } from 'vue'

const state = reactive({ loading: false })

function startLoading() {
  state.loading = true
}

function stopLoading() {
  state.loading = false
}

Использование в компоненте:

<n-spin :show="state.loading" overlay tip="Подождите..." />
<n-button @click="startLoading">Начать процесс</n-button>
<n-button @click="stopLoading">Завершить процесс</n-button>

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

Анимация и кастомизация Spin

Компонент Spin поддерживает кастомизацию через слоты и CSS-переменные. Например, можно заменить стандартный индикатор на SVG или использовать собственные стили:

<n-spin :show="true">
  <template #indicator>
    <svg width="48" height="48" viewBox="0 0 50 50">
      <circle cx="25" cy="25" r="20" stroke="#409EFF" stroke-width="4" fill="none" />
    </svg>
  </template>
</n-spin>

Также можно изменять цвет, толщину и скорость вращения через CSS-переменные:

.n-spin-indicator {
  --n-spin-color: #f56c6c;
  --n-spin-size: 48px;
  --n-spin-speed: 1.5s;
}