El Popconfirm

Popconfirm Component

Popconfirm provides a simple confirmation dialog for element click actions.

When to Use

• Delete confirmations
• Action confirmations
• Irreversible operation warnings
• Quick confirm dialogs

Basic Usage

<template>
  <el-popconfirm title="Are you sure to delete this?">
    <template #reference>
      <el-button>Delete</el-button>
    </template>
  </el-popconfirm>
</template>

Customize

<template>
  <el-popconfirm
    title="Are you sure?"
    confirm-button-text="Yes"
    cancel-button-text="No"
    @confirm="handleConfirm"
    @cancel="handleCancel"
  >
    <template #reference>
      <el-button type="danger">Delete</el-button>
    </template>
  </el-popconfirm>
</template>

<script setup>
const handleConfirm = () => {
  console.log('Confirmed')
}

const handleCancel = () => {
  console.log('Cancelled')
}
</script>

Trigger Event

<template>
  <el-popconfirm
    title="Delete this item?"
    @confirm="deleteItem"
  >
    <template #reference>
      <el-button type="danger">Delete</el-button>
    </template>
  </el-popconfirm>
</template>

<script setup>
const deleteItem = () => {
  // Delete logic
}
</script>

API Reference

Attributes

Events

Slots

Exposes

Best Practices

1. Use for destructive action confirmations
2. Provide clear confirmation messages
3. Use appropriate button types