101 lines
4.3 KiB
JSON
101 lines
4.3 KiB
JSON
{
|
||
"slug": "confirmmodal",
|
||
"end": "html",
|
||
"curated": true,
|
||
"summary": "原生 ConfirmModal：两套确认形态共用一个遮罩，危险态靠 is-danger 类，回调自己接。",
|
||
"usage": [
|
||
"遮罩是 .kole-modal-mask（#mask），弹体 .kole-confirm 内含 .kole-confirm-head（.kole-confirm-icon 加 .kole-confirm-title）、.kole-confirm-content 与 .kole-confirm-footer。",
|
||
"一页放了两套确认框，靠 #confirmPrimary 的 hidden 切换「普通确认」与「带额外勾选」两种形态。",
|
||
"危险态是类名：.kole-confirm-btn 上加 is-danger，普通确认为 is-primary，配色由状态类而非按钮类型决定。",
|
||
"「不再提示」是 .kole-confirm-extra 里的原生 <input type=\"checkbox\">（#dont），脚本读它的 checked 决定提示文案。",
|
||
"确认回调当前是 alert 占位（frameworks/ConfirmModal.html:46、:48），真实提交要替换这两处。"
|
||
],
|
||
"bestPractices": [
|
||
"确认与取消在示例里都只是关遮罩，接入时把业务逻辑放进 #ok 与 #okPrimary 的 handler 里。",
|
||
"两套弹窗共用同一个 #mask，同一时刻只能显示一套，新增形态时注意 hidden 的初始值。",
|
||
"遮罩关闭用 e.target === mask 判断，点弹体内部不会误关，这个判断要保持。"
|
||
],
|
||
"a11y": [
|
||
"弹窗没有 role=\"dialog\" 也没有 aria-modal，读屏不会进入模态上下文。",
|
||
"打开时焦点不移入弹窗、关闭后也不归还给触发按钮，键盘用户要自己 Tab 过去。",
|
||
"「不再提示」复选框用 <label> 包裹，标签与控件关联正确，这是页内少数做对的语义。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "attrs",
|
||
"note": "H5 端的状态载体是类名：.kole-modal-mask 的 display 管显隐、.kole-confirm-btn 上的 is-danger / is-primary 管按钮语义、.kole-confirm-extra 里放原生 checkbox，业务回调由页内脚本接管。",
|
||
"table": [
|
||
{
|
||
"name": "danger",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/ConfirmModal.html:27）。"
|
||
},
|
||
{
|
||
"name": "is-danger",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/ConfirmModal.html:27）。"
|
||
},
|
||
{
|
||
"name": "is-primary",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/ConfirmModal.html:16）。"
|
||
},
|
||
{
|
||
"name": "kole-confirm",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/ConfirmModal.html:16）。"
|
||
},
|
||
{
|
||
"name": "kole-confirm-btn",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/ConfirmModal.html:23）。"
|
||
},
|
||
{
|
||
"name": "kole-confirm-content",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/ConfirmModal.html:21）。"
|
||
},
|
||
{
|
||
"name": "kole-confirm-extra",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/ConfirmModal.html:33）。"
|
||
},
|
||
{
|
||
"name": "kole-confirm-footer",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/ConfirmModal.html:22）。"
|
||
},
|
||
{
|
||
"name": "kole-confirm-head",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/ConfirmModal.html:17）。"
|
||
},
|
||
{
|
||
"name": "kole-confirm-icon",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/ConfirmModal.html:18）。"
|
||
}
|
||
]
|
||
},
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/ConfirmModal.html",
|
||
"kind": "H5 原生",
|
||
"desc": "该端实现（本页 API 与用法的唯一权威来源）。"
|
||
},
|
||
{
|
||
"file": "frameworks/ConfirmModal.css",
|
||
"kind": "样式",
|
||
"desc": "该组件的样式文件，类名口径以它为准。"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"confirmmodal-ex-1",
|
||
"confirmmodal-ex-2"
|
||
],
|
||
"notes": [
|
||
"遮罩与弹体结构见（frameworks/ConfirmModal.html:15-24）。",
|
||
"两种形态的 hidden 切换见（frameworks/ConfirmModal.html:43-44）。",
|
||
"确认回调占位见（frameworks/ConfirmModal.html:46），勾选读取见（frameworks/ConfirmModal.html:48-49），遮罩点击关闭见（frameworks/ConfirmModal.html:52）。"
|
||
]
|
||
}
|