Состояния loading и disabled

В библиотеке Naive UI компоненты предоставляют удобные свойства для управления интерактивностью и визуальными индикаторами действий пользователя. Два ключевых состояния, с которыми чаще всего приходится работать, — это loading и disabled. Их правильное применение позволяет создавать интерфейсы, которые интуитивно понятны и отзывчивы.

Свойство loading

Состояние loading используется для отображения процесса выполнения действия, например, отправки формы, загрузки данных или выполнения асинхронной операции. В Naive UI большинство интерактивных компонентов, таких как кнопки (n-button) и селекты (n-select), поддерживают этот проп напрямую.

Пример использования кнопки с loading:

<template>
  <n-button :loading="isLoading" @click="handleClick">
    Отправить
  </n-button>
</template>

<script>
import { ref } from 'vue'

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

    const handleClick = async () => {
      isLoading.value = true
      try {
        await sendDataToServer() // асинхронная операция
      } finally {
        isLoading.value = false
      }
    }

    return { isLoading, handleClick }
  }
}
</script>

Особенности поведения:

  • Кнопка автоматически блокируется при включенном loading, предотвращая повторные клики.
  • Иконка загрузки отображается справа от текста по умолчанию, но может быть настроена через слот icon.
  • Свойство loading можно связать с реактивной переменной, что позволяет динамически менять состояние компонента.

Свойство disabled

Состояние disabled делает компонент недоступным для взаимодействия, блокируя все события клика или ввода. В отличие от loading, оно не обязательно сопровождается визуальной анимацией.

Пример использования:

<n-button :disabled="isDisabled">
  Невозможное действие
</n-button>

Ключевые моменты:

  • disabled полностью блокирует событие click.
  • Для полей ввода (n-input, n-select) блокирует возможность изменения значения.
  • Часто используется совместно с валидацией форм, чтобы предотвратить отправку данных при некорректных значениях.

Сравнение и взаимодействие loading и disabled

Хотя оба состояния ограничивают действия пользователя, между ними есть различия:

Свойство Поведение Визуальный индикатор
loading Компонент активен в плане состояния, но временно блокирует клики Анимация загрузки (спиннер)
disabled Полностью блокирует взаимодействие Потускневший или недоступный стиль

Взаимодействие:

  • loading часто подразумевает автоматическое включение блокировки (disabled), но можно управлять этим отдельно.
  • Например, кнопку можно сделать одновременно loading и disabled, чтобы подчеркнуть, что действие выполняется и пользователь не может его прервать.
<n-button :loading="isLoading" :disabled="isLoading">
  Обработка
</n-button>

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

В реальных приложениях состояния loading и disabled часто зависят от нескольких условий: асинхронных запросов, состояния формы или пользовательских действий.

Пример с формой:

<template>
  <n-form :model="formData" ref="formRef">
    <n-form-item label="Email">
      <n-input v-model="formData.email" :disabled="isSubmitting" />
    </n-form-item>
    <n-button
      type="primary"
      :loading="isSubmitting"
      :disabled="!isFormValid || isSubmitting"
      @click="submitForm"
    >
      Отправить
    </n-button>
  </n-form>
</template>

<script>
import { ref, computed } from 'vue'

export default {
  setup() {
    const formData = ref({ email: '' })
    const isSubmitting = ref(false)

    const isFormValid = computed(() => formData.value.email.includes('@'))

    const submitForm = async () => {
      isSubmitting.value = true
      try {
        await sendEmail(formData.value)
      } finally {
        isSubmitting.value = false
      }
    }

    return { formData, isSubmitting, submitForm, isFormValid }
  }
}
</script>

В этом примере:

  • Поле ввода блокируется во время отправки.
  • Кнопка отображает спиннер через loading.
  • Отправка недоступна, если форма некорректна (disabled).

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

Naive UI позволяет полностью кастомизировать спиннер, используя слоты и проп loading. Например, можно заменить стандартный индикатор на иконку:

<n-button :loading="isLoading">
  <template #loading>
    <n-icon><LoadingOutlined /></n-icon>
  </template>
  Загрузка
</n-button>

Таким образом интерфейс остается гибким и соответствует дизайну приложения.

Практические рекомендации

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

Эти подходы делают интерфейсы предсказуемыми и удобными, обеспечивая плавный пользовательский опыт.

Оглавление