# 气泡确认

挂在触发按钮旁的小确认框，用于轻量的二次确认（删除一行、下线一篇）。比模态框轻；破坏性很大的操作仍用确认对话框。

**依赖**：`zhaoui.css` 与 `zhaoui.js`（原生 HTML、CSS、JS，不需要框架或 jQuery）。

## 用法

```html
<button class="zh-btn" data-zh-popconfirm="删除这个文件？" data-desc="删除后 30 天内可在回收站找回。" data-ok="删除" data-danger id="pc-del">删除</button>
<script>
  document.getElementById('pc-del').addEventListener('zh:popconfirm', function (e) {
    if (e.detail.action === 'ok') ZhaoUI.message('已删除');
  });
</script>
```

## 样式类

`zh-pc`、`zh-pc-body`、`zh-pc-title`、`zh-pc-desc`、`zh-pc-foot`

## 属性

| 属性 | 用在 | 取值 | 说明 |
|---|---|---|---|
| `data-zh-popconfirm` | 触发按钮 | 确认问题，如“删除这个文件？” | 声明气泡确认，值是标题 |
| `data-desc` | 同上 | 补充说明 | 可选 |
| `data-ok / data-cancel` | 同上 | 按钮文字，默认“确定”“取消” | 确认按钮写动作，如“删除” |
| `data-danger` | 同上 |  | 破坏性操作：图标和确认按钮用危险色 |
| `data-kind` | 同上 | warning（默认）\| info | 图标语气 |
| `data-placement` | 同上 | top（默认）\| bottom \| left \| right | 位置 |

## 方法

- `ZhaoUI.popconfirm(anchor, options)`：命令式用法。options：title、desc、okText、cancelText、kind、danger、placement、onConfirm()。onConfirm 返回 Promise 时，确认按钮显示加载中，成功后关闭，失败则保持打开

## 事件

| 事件 | 触发于 | detail | 说明 |
|---|---|---|---|
| `zh:popconfirm` | 触发按钮 | { action: 'ok' \| 'cancel' } | 用户点了确认或取消。在 ok 时执行真正的操作 |

## 无障碍

- 焦点被限制在气泡内，Tab 在两个按钮间切换，Esc 取消并回到触发按钮
- 标题通过 aria-labelledby 关联
- 加载中时气泡外的点击与 Esc 被忽略，避免重复提交

## 常见问题

### 气泡确认是什么？

挂在触发按钮旁的小确认框，用于轻量的二次确认（删除一行、下线一篇）。比模态框轻；破坏性很大的操作仍用确认对话框。

### 怎么使用气泡确认？

先在页面里引入 zhaoui.css 和 zhaoui.js（放在 </body> 前，不加 defer），再照本页「用法」里的标记书写；需要用代码控制时，用「方法」里列出的接口。

### 气泡确认有哪些事件？

zh:popconfirm（用户点了确认或取消。在 ok 时执行真正的操作）。

### 气泡确认有哪些方法？

ZhaoUI.popconfirm(anchor, options)：命令式用法。options：title、desc、okText、cancelText、kind、danger、placement、onConfirm()。onConfirm 返回 Promise 时，确认按钮显示加载中，成功后关闭，失败则保持打开。

### 气泡确认支持键盘和读屏吗？

焦点被限制在气泡内，Tab 在两个按钮间切换，Esc 取消并回到触发按钮；标题通过 aria-labelledby 关联；加载中时气泡外的点击与 Esc 被忽略，避免重复提交。

### 气泡确认需要依赖框架吗？

不需要。ZhaoUI 是原生 HTML、CSS 和 JavaScript，不依赖 jQuery、Vue 或 React。