BreezeUI
  • 简体中文

    • Popconfirm 气泡确认框

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

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

    组件特性

    • ✅ 异步确认：支持点击确认后显示加载状态，异步处理确认逻辑。
    • 🎨 自定义按钮：支持自定义确认/取消按钮的文字、类型和颜色。
    • 📐 多种弹出位置：支持 12 个弹出方位。
    • 🖼️ 图标类型：内置 warning / info / success / error 四种图标类型，支持自定义图标。
    • 🌗 暗黑主题：继承 BrPopover 能力，支持暗黑模式自适应。
    • ♿️ 无障碍：基于 BrPopover 提供完整的无障碍支持。

    基础用法

    点击按钮弹出确认框。

    <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>

    异步确认

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

    <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>

    自定义按钮

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

    <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>

    弹出位置

    支持 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>

    图标类型

    内置 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 属性

    属性类型默认值说明
    openboolean-是否展开（v-model）
    defaultOpenboolean-默认是否展开
    trigger'click' | 'hover' | 'focus' | 'manual''click'触发方式
    placementPopoverPlacement'top'弹出位置
    titlestring-确认标题
    descriptionstring-确认描述
    confirmTextstring'Confirm'确认按钮文字
    cancelTextstring'Cancel'取消按钮文字
    confirmVariantButtonVariants['variant']'solid'确认按钮样式
    cancelVariantButtonVariants['variant']'outline'取消按钮样式
    confirmLoadingbooleanfalse确认按钮加载态
    disabledbooleanfalse是否禁用
    iconType'warning' | 'info' | 'success' | 'error''warning'图标类型
    iconComponent-自定义图标组件，覆盖 iconType
    showIconbooleantrue是否显示图标
    confirmColorButtonVariants['color']'primary'确认按钮颜色
    cancelColorButtonVariants['color']'default'取消按钮颜色
    openDelaynumber200打开延迟（hover 模式）
    closeDelaynumber300关闭延迟（hover 模式）

    BrPopconfirm 事件

    事件类型说明
    update:open(value: boolean) => void展开状态变化
    confirm() => void点击确认按钮
    cancel() => void点击取消按钮

    BrPopconfirm 插槽

    插槽说明
    default触发元素