iter(g107): 新增二次确认气泡 popconfirm

This commit is contained in:
HIsheR
2026-10-26 13:59:48 +08:00
parent 137bf87d83
commit 48f94659e4
14 changed files with 287 additions and 11 deletions
+32 -1
View File
@@ -1,6 +1,6 @@
# @ui-arch 组件库 Agent 文档(无图形版)
> 自动生成于 2026-10-26T05:56:43.149Z,数据源:各包 ua.manifest.json,勿手改。人类版文档站:apps/docs/index.html。
> 自动生成于 2026-10-26T05:59:36.078Z,数据源:各包 ua.manifest.json,勿手改。人类版文档站:apps/docs/index.html。
> 组件 = 普通函数,传 props 返回 DOM;状态用 signal 双向绑定:读 signal() 写 signal(v)。
## 快速上手
@@ -605,6 +605,7 @@ tooltip({ content: '保存后立即生效' }, button({ label: '保存', onClick:
- delay(默认 150):number —— hover 模式出场延迟毫秒;缺省 150
- onOpenChange(回调):(open: boolean) => void —— 开合回调
- triggerEl(第二个参数)(必填):HTMLElement —— 第二个参数:被包裹的触发器元素
- open:Signal<boolean> —— 受控开合信号;不传则内部维护,传了外部可编程开合(popconfirm 即基于它)
示例:
@@ -1590,6 +1591,35 @@ anchor({ items: [{ href: '#sec-button', title: '按钮' }, { href: '#sec-card',
现场演示:apps/docs/demo.html#sec-anchor
### popconfirm — 二次确认 Popconfirm
参数:
- title(必填):string —— 气泡标题,通常写成一句问句(如「删除这条记录?」)
- description:string —— 补充说明:影响范围、是否可撤销;缺省给一句通用提示
- confirmText:string —— 确认按钮文案;缺省「确定」
- cancelText:string —— 取消按钮文案;缺省「取消」
- variant:'default' | 'danger' —— 确认按钮语义色;删除类操作传 danger,缺省 default
- placement:'top' | 'bottom' —— 气泡方位;缺省 top,压在触发器上方不盖住被操作的行
- onConfirm(回调):() => void —— 点确定后的回调(此时弹层已收起)
- onCancel(回调):() => void —— 取消 / 点外部 / Esc 收起时的回调
- open:Signal<boolean> —— 受控开合信号;不传则内部维护,传了可由外部编程开合
示例:
```
popconfirm({ title: '删除这条记录?', description: '删除后无法恢复', variant: 'danger', confirmText: '删除', onConfirm: () => toast.success('已删除') }, button({ label: '删除', variant: 'danger' }))
```
手把手:
1. 把要保护的触发器元素(按钮 / 图标)作为第二个参数传进去,返回的包裹节点替换原位置
2. 写清 title(问句)与 description(影响范围),删除类操作把 variant 设成 danger,确认按钮会自动变成危险色
3. 点确定先收起弹层再触发 onConfirm,回调里可以放心同步改数据;取消、点外部、Esc 一律走 onCancel
4. 展开时焦点自动落在「取消」上,误按回车不会执行危险操作;需要外部控制开合时传 open 信号
现场演示:apps/docs/demo.html#sec-popconfirm
API 速览:
- button(props):按钮,variant = primary | ghost | danger,disabled 支持布尔或信号禁用;type 缺省 button(表单内不隐式提交)
@@ -1652,6 +1682,7 @@ API 速览:
- affix(props, ...children):固钉,滚过 offset 后内容转 fixed 贴顶、外层保留占位高度,固定后宽度随容器自适应
- multiSelect(props):多选下拉,标签式回显 + 可搜索弹层,点选不收起便于连续多选,max 到限后未选项禁用
- anchor(props):锚点导航,竖排区块链接,滚动时按目标位置高亮当前区块(aria-current 同步),点击按 offset 偏移量平滑定位并回写 hash;container 可指定内滚容器
- popconfirm(props, trigger):二次确认气泡,挂在任意触发器上,就地确认危险操作;确定后先收起再回调,取消 / 点外部 / Esc 走 onCancel,展开即聚焦「取消」
一行用法: