气泡确认
挂在触发按钮旁的小确认框，用于轻量的二次确认（删除一行、下线一篇）。比模态框轻；破坏性很大的操作仍用确认对话框。
带行为 核心包 1 个事件 1 个方法
示例
代码
<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>属性
| 属性 | 用在 | 取值 | 说明 |
|---|---|---|---|
data-zh-popconfirm | 触发按钮 | 确认问题，如“删除这个文件？” | 声明气泡确认，值是标题 |
data-desc | 同上 | 补充说明 | 可选 |
data-ok / data-cancel | 同上 | 按钮文字，默认“确定”“取消” | 确认按钮写动作，如“删除” |
data-danger | 同上 | 破坏性操作：图标和确认按钮用危险色 | |
data-kind | 同上 | warning（默认）| info | 图标语气 |
data-placement | 同上 | top（默认）| bottom | left | right | 位置 |
事件
| 事件 | 触发于 | detail | 说明 |
|---|---|---|---|
zh:popconfirm | 触发按钮 | { action: 'ok' | 'cancel' } | 用户点了确认或取消。在 ok 时执行真正的操作 |
方法
ZhaoUI.popconfirm(anchor, options)：命令式用法。options：title、desc、okText、cancelText、kind、danger、placement、onConfirm()。onConfirm 返回 Promise 时，确认按钮显示加载中，成功后关闭，失败则保持打开
样式类
zh-pc zh-pc-body zh-pc-title zh-pc-desc zh-pc-foot
无障碍
- 焦点被限制在气泡内，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。