BreezeUI
  • English

    • Popconfirm

    气泡确认框，用于二次确认操作。点击元素弹出气泡确认框，支持异步确认、自定义按钮、多种弹出位置。

    基于 BrPopover 封装，继承其定位、动画、暗黑主题、无障碍能力。

    Component Features

    • ✅ Async Confirm: Supports async confirmation with loading state during processing.
    • 🎨 Custom Buttons: Supports custom button text, type, and color for confirm/cancel.
    • 📐 12 Positions: Supports 12 placement positions.
    • 🖼️ Icon Types: Built-in warning / info / success / error icon types with custom icon support.
    • 🌗 Dark Theme: Inherits from BrPopover with automatic dark mode adaptation.
    • ♿️ Accessibility: Based on BrPopover for complete accessibility support.

    Basic Usage

    点击按钮弹出确认框。

    <script setup lang="ts">
import { ref } from 'vue'
import { BrPopconfirm, BrButton } from '@breezeui/vue'

const confirmed = ref(false)

const handleConfirm = () => {
  confirmed.value = true
  setTimeout(() => {
    confirmed.value = false
  }, 2000)
}
</script>

<template>
  <div class="flex flex-col items-center gap-8 p-8">
    <div class="flex items-center gap-4">
      <BrPopconfirm
        title="Are you sure?"
        description="This action cannot be undone."
        @confirm="handleConfirm"
      >
        <BrButton>Delete</BrButton>
      </BrPopconfirm>
    </div>
    <p v-if="confirmed" class="text-sm text-emerald-500">Confirmed!</p>
  </div>
</template>

    Async Confirm

    支持异步确认，点击确认后显示加载状态。

    <script setup lang="ts">
import { ref } from 'vue'
import { BrPopconfirm, BrButton } from '@breezeui/vue'

const loading = ref(false)

const handleAsyncConfirm = () => {
  loading.value = true
  setTimeout(() => {
    loading.value = false
  }, 2000)
}
</script>

<template>
  <div class="flex items-center gap-4 p-8">
    <BrPopconfirm
      title="Submit request?"
      description="This will process your request."
      confirm-text="Submit"
      :confirm-loading="loading"
      @confirm="handleAsyncConfirm"
    >
      <BrButton variant="outline">Submit Request</BrButton>
    </BrPopconfirm>
  </div>
</template>

    Custom Button

    自定义按钮文字、类型和颜色。

    <script setup lang="ts">
import { BrPopconfirm, BrButton } from '@breezeui/vue'
</script>

<template>
  <div class="flex items-center gap-4 p-8">
    <BrPopconfirm
      title="Delete item?"
      description="This action is permanent and cannot be undone."
      confirm-text="Delete"
      confirm-color="danger"
      cancel-text="Keep"
    >
      <BrButton variant="danger">Danger Delete</BrButton>
    </BrPopconfirm>

    <BrPopconfirm
      title="Clear cache?"
      description="This will clear all cached data."
      confirm-text="Clear"
      confirm-variant="ghost"
    >
      <BrButton variant="ghost">Clear Cache</BrButton>
    </BrPopconfirm>
  </div>
</template>

    Placement

    支持 12 个弹出方位。

    <script setup lang="ts">
import { BrPopconfirm, BrButton } from '@breezeui/vue'

const placements = [
  'top', 'top-start', 'top-end',
  'bottom', 'bottom-start', 'bottom-end',
  'left', 'left-start', 'left-end',
  'right', 'right-start', 'right-end',
] as const
</script>

<template>
  <div class="grid grid-cols-4 gap-4 p-8">
    <BrPopconfirm
      v-for="p in placements"
      :key="p"
      :title="p"
      :placement="p"
    >
      <BrButton variant="outline" size="sm">{{ p }}</BrButton>
    </BrPopconfirm>
  </div>
</template>

    Icon Type

    内置 warning / info / success / error 四种图标类型，也支持自定义图标。

    <script setup lang="ts">
import { BrPopconfirm, BrButton } from '@breezeui/vue'
import { HelpCircle } from 'lucide-vue-next'
</script>

<template>
  <div class="flex flex-col gap-4 p-8">
    <div class="flex items-center gap-4">
      <BrPopconfirm title="Warning action" icon-type="warning">
        <BrButton variant="outline" size="sm">Warning</BrButton>
      </BrPopconfirm>

      <BrPopconfirm title="Info notice" icon-type="info">
        <BrButton variant="outline" size="sm">Info</BrButton>
      </BrPopconfirm>

      <BrPopconfirm title="Success action" icon-type="success">
        <BrButton variant="outline" size="sm">Success</BrButton>
      </BrPopconfirm>

      <BrPopconfirm title="Error action" icon-type="error">
        <BrButton variant="outline" size="sm">Error</BrButton>
      </BrPopconfirm>
    </div>

    <div class="flex items-center gap-4">
      <BrPopconfirm title="Custom icon" :icon="HelpCircle">
        <BrButton variant="outline" size="sm">Custom Icon</BrButton>
      </BrPopconfirm>

      <BrPopconfirm title="No icon" :show-icon="false">
        <BrButton variant="outline" size="sm">No Icon</BrButton>
      </BrPopconfirm>
    </div>
  </div>
</template>

    API

    BrPopconfirm Props

    PropTypeDefaultDescription
    openboolean-是否展开（v-model）
    defaultOpenboolean-默认是否展开
    trigger'click' | 'hover' | 'focus' | 'manual''click'Trigger mode
    placementPopoverPlacement'top'Popup placement
    titlestring-Confirm title
    descriptionstring-Confirm description
    confirmTextstring'Confirm'Confirm button text
    cancelTextstring'Cancel'Cancel button text
    confirmVariantButtonVariants['variant']'solid'Confirm button variant
    cancelVariantButtonVariants['variant']'outline'Cancel button variant
    confirmLoadingbooleanfalseConfirm button loading state
    disabledbooleanfalseWhether disabled
    iconType'warning' | 'info' | 'success' | 'error''warning'Icon type
    iconComponent-Custom icon component, overrides iconType
    showIconbooleantrueWhether to show icon
    confirmColorButtonVariants['color']'primary'Confirm button color
    cancelColorButtonVariants['color']'default'Cancel button color
    openDelaynumber200Open delay (ms, hover trigger)
    closeDelaynumber300Close delay (ms, hover trigger)

    BrPopconfirm Events

    EventTypeDescription
    update:open(value: boolean) => void展开状态变化
    confirm() => void点击确认按钮
    cancel() => void点击取消按钮

    BrPopconfirm Slots

    SlotDescription
    default触发元素