105 lines
5.0 KiB
JSON
105 lines
5.0 KiB
JSON
{
|
||
"slug": "popconfirm",
|
||
"end": "react",
|
||
"curated": true,
|
||
"summary": "气泡确认：children 是触发元素，visible 受控，确认与取消各走一个回调。",
|
||
"usage": [
|
||
"React 端触发元素就是 children，组件用一层 span 包住它并绑定展开切换（Popconfirm.jsx:59）。",
|
||
"受控判断很直接：visible !== undefined 用外部值，否则读 defaultVisible 并在内部 setInnerOpen（Popconfirm.jsx:28-29）。",
|
||
"确认与取消各自回调且都会关闭：confirm 先 onConfirm() 再 setOpen(false)（Popconfirm.jsx:54-55），因此确定按钮不会保持展开等异步。",
|
||
"定位是运行时算的：展开时用 getBoundingClientRect 计算 left/top 或 left/bottom 写进内联 style（Popconfirm.jsx:32-38）。",
|
||
"点击外部关闭通过在 document 上以捕获阶段监听 click 实现，展开时挂载、收起时移除（Popconfirm.jsx:41-42,50-51）。"
|
||
],
|
||
"bestPractices": [
|
||
"抛出的浮层用的是 fixed 定位坐标，页面滚动后位置不会自动跟随，父容器若可滚动建议展开期间自行关闭或重算。",
|
||
"placement 只实现了 bottom 与 top 两个取值（Popconfirm.jsx:36-37），不要传 left/right。",
|
||
"危险操作在 onConfirm 内做二次校验后自行关闭父级弹窗，气泡本身只负责收起自己。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "props",
|
||
"note": "React 端的 API 载体是 props 与回调：属性驱动外观（type/size/disabled 等布尔与枚举），交互经 onXxx 回传（如 onChange/onClick/onSelectionChange）；没有 v-model，受控组件固定写成 value + onChange，非受控则用 defaultValue。",
|
||
"table": [
|
||
{
|
||
"name": "title",
|
||
"type": "string",
|
||
"desc": "确认描述文本"
|
||
},
|
||
{
|
||
"name": "okText",
|
||
"type": "string",
|
||
"desc": "确认按钮文案，默认「确定」"
|
||
},
|
||
{
|
||
"name": "cancelText",
|
||
"type": "string",
|
||
"desc": "取消按钮文案，默认「取消」"
|
||
},
|
||
{
|
||
"name": "placement",
|
||
"type": "'bottom' | 'top'",
|
||
"desc": "弹出方向"
|
||
},
|
||
{
|
||
"name": "visible",
|
||
"type": "boolean",
|
||
"desc": "受控展开态，传入即以它为准"
|
||
},
|
||
{
|
||
"name": "defaultVisible",
|
||
"type": "boolean",
|
||
"desc": "非受控初始展开态"
|
||
},
|
||
{
|
||
"name": "children",
|
||
"type": "ReactNode",
|
||
"desc": "触发元素"
|
||
},
|
||
{
|
||
"name": "onConfirm",
|
||
"type": "() => void",
|
||
"desc": "点击确认回调，随后自动收起"
|
||
},
|
||
{
|
||
"name": "onCancel",
|
||
"type": "() => void",
|
||
"desc": "点击取消回调，随后自动收起"
|
||
}
|
||
]
|
||
},
|
||
"a11y": [
|
||
"浮层是 div，未使用 role=\"dialog\"/\"tooltip\"，也没有 aria-describedby 关联触发元素（Popconfirm.jsx:61）。",
|
||
"两个操作按钮是原生 button，键盘可聚焦与触发（Popconfirm.jsx:67-68）。",
|
||
"无 Esc 关闭与焦点回退，纯键盘用户在气泡未收起时焦点仍停在触发元素上，需自行补键盘处理。"
|
||
],
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/Popconfirm.jsx",
|
||
"kind": "React（React）",
|
||
"desc": "React 端组件实现源码，props 与回调的唯一定义处"
|
||
},
|
||
{
|
||
"file": "frameworks/Popconfirm.css",
|
||
"kind": "样式",
|
||
"desc": "该 React 实现依赖的样式文件"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"popconfirm-ex-1",
|
||
"popconfirm-ex-2"
|
||
],
|
||
"notes": [
|
||
"frameworks/Popconfirm.jsx:9 中可指到 title（string）——确认描述文本",
|
||
"frameworks/Popconfirm.jsx:10 中可指到 okText（string）——确认按钮文案，默认「确定」",
|
||
"frameworks/Popconfirm.jsx:10 中可指到 cancelText（string）——取消按钮文案，默认「取消」",
|
||
"frameworks/Popconfirm.jsx:11 中可指到 placement（'bottom' | 'top'）——弹出方向",
|
||
"frameworks/Popconfirm.jsx:12 中可指到 visible（boolean）——受控展开态，传入即以它为准",
|
||
"frameworks/Popconfirm.jsx:12 中可指到 defaultVisible（boolean）——非受控初始展开态",
|
||
"frameworks/Popconfirm.jsx:14 中可指到 children（ReactNode）——触发元素",
|
||
"frameworks/Popconfirm.jsx:13 中可指到 onConfirm（() => void）——点击确认回调，随后自动收起",
|
||
"frameworks/Popconfirm.jsx:13 中可指到 onCancel（() => void）——点击取消回调，随后自动收起",
|
||
"props 解构清单见 frameworks/Popconfirm.jsx:16-26；本文件 table 只列该端真正消费的属性与回调。",
|
||
"过滤口径：事实包 consumedApi 里还包含绑在组件内部节点上的同名处理器（如 onClick/onChange 绑在内部 button、input、checkbox 上，见 frameworks/Popconfirm.jsx 全文），它们不是对外 props，因此未进 table。",
|
||
"table 构成核验：9 行中 9 行是 frameworks/Popconfirm.jsx 解构出的顶层 props（解构块 frameworks/Popconfirm.jsx:16-26）；本组件 table 全部为顶层 props。"
|
||
]
|
||
}
|