Popconfirm

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

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

Компонент Popconfirm оборачивает целевой элемент и реагирует на события пользователя, такие как клик. Минимальный пример использования:

import { NPopconfirm, NButton } from 'naive-ui'

<NPopconfirm
  trigger="click"
  title="Вы уверены, что хотите удалить элемент?"
  onPositiveCl ick={() => console.log('Подтверждено')}
  onNegativeCl ick={() => console.log('Отменено')}
>
  <NButton>Удалить</NButton>
</NPopconfirm>

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

  • trigger — определяет событие, при котором появляется Popconfirm (click, hover, focus).
  • title — текст подтверждения.
  • onPositiveClick — колбэк при нажатии на кнопку подтверждения.
  • onNegativeClick — колбэк при нажатии на кнопку отмены.

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

По умолчанию Popconfirm использует стандартные кнопки с текстом «OK» и «Cancel». Их можно изменить через свойства positive-text и negative-text:

<NPopconfirm
  title="Сохранить изменения?"
  positive-text="Да"
  negative-text="Нет"
  onPositiveCl ick={saveChanges}
  onNegativeCl ick={discardChanges}
>
  <NButton>Сохранить</NButton>
</NPopconfirm>

Можно также использовать кастомные кнопки через слоты:

<NPopconfirm>
  <template #default>
    <NButton>Удалить</NButton>
  </template>
  <template #footer>
    <NButton type="error" @click="confirmDelete">Да, удалить</NButton>
    <NButton @click="cancelDelete">Отмена</NButton>
  </template>
</NPopconfirm>

Управление видимостью

Popconfirm поддерживает контролируемую видимость через v-model:show:

<NPopconfirm
  v-model:show="showConfirm"
  title="Удалить файл?"
  @positive-click="handleDelete"
>
  <NButton @click="showConfirm = true">Удалить</NButton>
</NPopconfirm>
  • showConfirm — булевое состояние видимости Popconfirm.
  • Позволяет программно показывать или скрывать всплывающее окно.

Позиционирование

Popconfirm использует встроенный механизм позиционирования, основанный на Popper.js. Основное свойство:

  • placement — определяет положение относительно целевого элемента. Возможные значения:
top, top-start, top-end, bottom, bottom-start, bottom-end,
left, left-start, left-end, right, right-start, right-end

Пример:

<NPopconfirm
  placement="bottom-end"
  title="Удалить этот элемент?"
>
  <NButton>Удалить</NButton>
</NPopconfirm>

Использование с формами и динамическим контентом

Popconfirm может содержать сложный контент, включая формы или динамические данные:

<NPopconfirm>
  <template #default>
    <NButton>Подтвердить действия</NButton>
  </template>
  <template #content>
    <div>
      <p>Выберите опцию для подтверждения:</p>
      <NSelect :options="options" v-model:value="selectedOption" />
    </div>
  </template>
</NPopconfirm>
  • #content позволяет полностью контролировать содержимое всплывающего окна.
  • Подходит для кастомных интерактивных интерфейсов.

Анимация и стили

Popconfirm наследует глобальные стили Naive UI, но можно настраивать локально через CSS-переменные или классы:

.custom-popconfirm {
  --n-popconfirm-color: #ffffff;
  --n-popconfirm-border-radius: 8px;
}

Применение класса:

<NPopconfirm class="custom-popconfirm" title="Удалить элемент?">
  <NButton>Удалить</NButton>
</NPopconfirm>

Также поддерживается анимация появления и скрытия через стандартные transition компоненты Vue.

Комбинация с другими компонентами

Popconfirm часто используется совместно с кнопками (NButton) и списками (NDataTable, NList), чтобы добавлять защиту для критических действий. Пример с таблицей:

<NDataTable :columns="columns" :data="data">
  <template #action="{ row }">
    <NPopconfirm
      title="Вы уверены, что хотите удалить этот ряд?"
      @positive-click="() => deleteRow(row.id)"
    >
      <NButton size="small" type="error">Удалить</NButton>
    </NPopconfirm>
  </template>
</NDataTable>
  • Каждая кнопка внутри таблицы имеет собственный Popconfirm.
  • Предотвращает случайное удаление данных.

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

Оглавление