Popconfirm

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

Основные свойства Popconfirm

  1. title Задает текст подтверждения. Обязательное свойство, которое определяет сообщение, отображаемое в диалоговом окне.

    <el-popconfirm title="Вы уверены, что хотите удалить запись?">
  <el-button>Удалить</el-button>
</el-popconfirm>

  2. confirm-button-text и cancel-button-text Позволяют настроить текст кнопок подтверждения и отмены.

    <el-popconfirm 
  title="Вы уверены?" 
  confirm-button-text="Да" 
  cancel-button-text="Нет">
  <el-button>Удалить</el-button>
</el-popconfirm>

  3. confirm-button-type и cancel-button-type Определяют визуальный стиль кнопок (например, primary, danger, success). Это позволяет подчеркнуть важность действия.

    <el-popconfirm 
  title="Удалить пользователя?" 
  confirm-button-type="danger">
  <el-button>Удалить</el-button>
</el-popconfirm>

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

    <el-popconfirm 
  title="Подтвердить действие?" 
  placement="top-start">
  <el-button>Подтвердить</el-button>
</el-popconfirm>

  5. visible и v-model:visible Управление видимостью Popconfirm через реактивное свойство. Позволяет показывать или скрывать окно программно.

    <el-popconfirm v-model:visible="visible" title="Вы уверены?">
  <el-button @click="visible = true">Удалить</el-button>
</el-popconfirm>

<script>
export default {
  data() {
    return { visible: false };
  }
}
</script>

Обработка событий

Popconfirm поддерживает несколько событий, которые помогают управлять поведением приложения:

  • confirm — срабатывает при нажатии кнопки подтверждения.
  • cancel — срабатывает при нажатии кнопки отмены.
  • after-enter / after-leave — позволяют выполнять действия после открытия или закрытия окна.

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

<el-popconfirm
  title="Удалить запись?"
  @confirm="handleConfirm"
  @cancel="handleCancel"
>
  <el-button>Удалить</el-button>
</el-popconfirm>

<script>
export default {
  methods: {
    handleConfirm() {
      console.log("Действие подтверждено");
    },
    handleCancel() {
      console.log("Действие отменено");
    }
  }
}
</script>

Слоты Popconfirm

Popconfirm поддерживает пользовательские слоты для гибкой настройки интерфейса:

  • reference — слот для триггерного элемента (например, кнопки или иконки).
  • icon — слот для кастомного значка предупреждения.

Пример с кастомным значком:

<el-popconfirm title="Удалить?" placement="top">
  <template #reference>
    <el-button>Удалить</el-button>
  </template>
  <template #icon>
    <el-icon><Warning /></el-icon>
  </template>
</el-popconfirm>

Интеграция с таблицами и списками

Popconfirm часто используется внутри таблиц ElTable для подтверждения удаления строк:

<el-table :data="users">
  <el-table-column prop="name" label="Имя" />
  <el-table-column label="Действия">
    <template #default="scope">
      <el-popconfirm
        title="Удалить пользователя?"
        @confirm="deleteUser(scope.row.id)"
      >
        <el-button size="small" type="danger">Удалить</el-button>
      </el-popconfirm>
    </template>
  </el-table-column>
</el-table>

<script>
export default {
  data() {
    return { users: [{ id: 1, name: 'Иван' }] };
  },
  methods: {
    deleteUser(id) {
      this.users = this.users.filter(user => user.id !== id);
    }
  }
}
</script>

Настройка таймаутов и программное управление

Popconfirm может быть полностью управляемым через JavaScript. Можно открывать и закрывать окно программно, а также добавлять таймер закрытия:

<el-popconfirm v-model:visible="visible" title="Подтвердите действие">
  <el-button @click="showPopconfirm">Удалить</el-button>
</el-popconfirm>

<script>
export default {
  data() {
    return { visible: false };
  },
  methods: {
    showPopconfirm() {
      this.visible = true;
      setTimeout(() => {
        this.visible = false;
      }, 3000);
    }
  }
}
</script>

Лучшие практики использования Popconfirm

  1. Использовать Popconfirm только для опасных действий, таких как удаление данных или окончательное подтверждение.
  2. Настраивать текст и кнопки так, чтобы они были максимально понятными и предсказуемыми.
  3. Использовать placement, чтобы окно не перекрывало важные элементы интерфейса.
  4. В сложных формах комбинировать Popconfirm с методами валидации для предотвращения потери данных.

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

Оглавление