> Leaf UI 0.8.1 · Package: @ifhover/leaf-ui · Source: 435bab23cad7d343653d9b63b049c0b0601eeefb
> Browser documentation: https://ifhover.github.io/leaf-ui/components/popconfirm.html

> For AI agents: the complete documentation index is available at https://ifhover.github.io/leaf-ui/llms.txt, the full documentation bundle is available at https://ifhover.github.io/leaf-ui/llms-full.txt.

# Popconfirm 气泡确认

在操作位置附近确认重要操作。

## 基本用法


移除项目

basic.tsx

复制代码

```tsx lineNumbers file="../../src/examples/popconfirm/basic.tsx"
import { Button, Popconfirm } from '@ifhover/leaf-ui';

import { useState } from 'react';

export function PopconfirmBasic() {
  const [removed, setRemoved] = useState(false);
  return (
    <Popconfirm
      title="移除此项目？"
      description="移除后仍可在回收站中恢复。"
      onConfirm={() => setRemoved(true)}
    >
      <Button variant="outline" danger disabled={removed}>
        {removed ? '已移除' : '移除项目'}
      </Button>
    </Popconfirm>
  );
}
```

展开代码

## 更多用法


异步确认

advanced.tsx

复制代码

```tsx lineNumbers file="../../src/examples/popconfirm/advanced.tsx"
import { Button, Popconfirm } from '@ifhover/leaf-ui';

export function PopconfirmAsync() {
  return (
    <Popconfirm
      title="提交审核？"
      type="info"
      onConfirm={() => new Promise<void>((resolve) => setTimeout(resolve, 900))}
    >
      <Button>异步确认</Button>
    </Popconfirm>
  );
}
```

展开代码

## 使用说明

onConfirm 可返回 Promise；等待期间显示加载并阻止重复提交。成功后关闭，失败时保持打开，可通过 onError 展示错误。触发元素应支持 ref 与按钮交互。

## 类型

组装数据、定义回调和使用 ref 时，可以导入这些类型。

```ts
import type { PopconfirmProps, ButtonProps } from '@ifhover/leaf-ui';
```

## PopconfirmProps API

| 属性                   | 类型                                                                                                                                                                   | 默认值         | 说明                         |
| -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | -------------------------- |
| `popupPlacement`     | `'top' \| 'top-start' \| 'top-end' \| 'bottom' \| 'bottom-start' \| 'bottom-end' \| 'left' \| 'left-start' \| 'left-end' \| 'right' \| 'right-start' \| 'right-end'` | —           | 浮层相对触发控件的位置。               |
| `popupClassName`     | `string`                                                                                                                                                             | —           | 浮层的自定义类名。                  |
| `popupStyle`         | `CSSProperties`                                                                                                                                                      | —           | 浮层的自定义样式。                  |
| `popupRender`        | `(content: React.ReactNode) => React.ReactNode`                                                                                                                      | —           | 包装或补充面板内容，保留传入的内容以维持交互。    |
| `getPopupContainer`  | `() => Element \| DocumentFragment`                                                                                                                                  | —           | 返回浮层的挂载容器，也可返回 ShadowRoot。 |
| `children`           | `ReactElement< HTMLAttributes<HTMLElement> & { ref?: Ref<HTMLElement>; disabled?: boolean } >`                                                                       | 必填          | 必需。内容或下级项目                 |
| `placement`          | `'top' \| 'top-start' \| 'top-end' \| 'bottom' \| 'bottom-start' \| 'bottom-end' \| 'left' \| 'left-start' \| 'left-end' \| 'right' \| 'right-start' \| 'right-end'` | `'top'`     | 显示位置                       |
| `open`               | `boolean`                                                                                                                                                            | —           | 受控展示状态                     |
| `defaultOpen`        | `boolean`                                                                                                                                                            | `false`     | 初始展示状态                     |
| `onOpenChange`       | `(open: boolean) => void`                                                                                                                                            | —           | 展开状态变化                     |
| `disabled`           | `boolean`                                                                                                                                                            | —           | 禁用交互。                      |
| `enterDelay`         | `number`                                                                                                                                                             | `100`       | 指针进入后的打开延迟，单位毫秒            |
| `leaveDelay`         | `number`                                                                                                                                                             | `100`       | 指针离开后的关闭延迟，单位毫秒            |
| `width`              | `number \| string`                                                                                                                                                   | —           | 宽度，数字按像素计算                 |
| `maxWidth`           | `number \| string`                                                                                                                                                   | —           | 浮层最大宽度                     |
| `className`          | `string`                                                                                                                                                             | —           | 容器类名                       |
| `style`              | `CSSProperties`                                                                                                                                                      | —           | 容器内联样式                     |
| `aria-label`         | `string`                                                                                                                                                             | —           | 无可见标题时的可访问名称               |
| `title`              | `ReactNode`                                                                                                                                                          | 必填          | 必需。标题内容                    |
| `description`        | `ReactNode`                                                                                                                                                          | —           | 补充说明                       |
| `type`               | `'success' \| 'info' \| 'warning' \| 'error' \| 'default'`                                                                                                           | `'warning'` | 显示或选项类型                    |
| `icon`               | `ReactNode`                                                                                                                                                          | —           | 自定义图标                      |
| `confirmText`        | `ReactNode`                                                                                                                                                          | —           | 确认按钮内容                     |
| `cancelText`         | `ReactNode`                                                                                                                                                          | —           | 取消按钮内容                     |
| `confirmButtonProps` | [`ButtonProps`](https://ifhover.github.io/leaf-ui/components/button.md#button-api)                                                                                   | —           | 确认按钮属性                     |
| `cancelButtonProps`  | [`ButtonProps`](https://ifhover.github.io/leaf-ui/components/button.md#button-api)                                                                                   | —           | 取消按钮属性                     |
| `showCancel`         | `boolean`                                                                                                                                                            | `true`      | 展示取消按钮                     |
| `onConfirm`          | `() => void \| Promise<void>`                                                                                                                                        | —           | 确认操作，支持异步等待                |
| `onCancel`           | `() => void`                                                                                                                                                         | —           | 取消操作                       |
| `onError`            | `(error: unknown) => void`                                                                                                                                           | —           | 异常回调                       |

## ButtonProps API

| 属性          | 类型                                         | 默认值       | 说明      |
| ----------- | ------------------------------------------ | --------- | ------- |
| `variant`   | `'solid' \| 'outline' \| 'soft' \| 'link'` | `'solid'` | 按钮样式    |
| `size`      | `'sm' \| 'md' \| 'lg'`                     | `'md'`    | 尺寸或间距预设 |
| `danger`    | `boolean`                                  | `false`   | 危险操作颜色  |
| `loading`   | `boolean`                                  | `false`   | 加载状态    |
| `fullWidth` | `boolean`                                  | `false`   | 占满宽度    |
| `startIcon` | `ReactNode`                                | —         | 前置图标    |
| `endIcon`   | `ReactNode`                                | —         | 后置图标    |