69 lines
3.2 KiB
JSON
69 lines
3.2 KiB
JSON
{
|
||
"slug": "messagepro",
|
||
"end": "html",
|
||
"curated": true,
|
||
"summary": "原生消息提示：页内挂 window.KoleMessage，按类型造节点插入顶部容器并自动消失。",
|
||
"usage": [
|
||
"脚本自建容器：document.createElement(\"div\") 加类名 .kole-message-wrap 后 appendChild 到 body，页面里不需要预置容器。",
|
||
"对外接口是 window.KoleMessage，提供 success / error / warning / info / loading 五个便捷方法与一个通用 open(opts)。",
|
||
"每条消息结构是 .kole-message 叠 is-<type>，内含 .kole-message-icon、.kole-message-content 与可选的 .kole-message-close。",
|
||
"自动关闭由 duration 控制，默认 3000 毫秒，传 0 或负数则不自动关（if (d > 0) setTimeout(close, d)）。",
|
||
"open 返回 close 函数，调用方可以提前手动关闭；关闭按钮点击也走同一个 close。"
|
||
],
|
||
"bestPractices": [
|
||
"is-<type> 是拼出来的状态类，类型只允许脚本 ICON 表里那几个，传别的会退回默认图标 i。",
|
||
"opts.content 直接进 innerHTML，接用户输入前必须转义。",
|
||
"duration 默认 3000 对长文案偏短，需要停住时用返回的 close 或显式传 0。"
|
||
],
|
||
"a11y": [
|
||
"图标、内容、关闭三处都写了 aria-live=\"polite\"、关闭按钮还叠了 role=\"status\"，live region 重复声明在同一节点树内会互相干扰。",
|
||
"消息插入后才创建节点，配合 aria-live 本可播报，但重复的 live 区域会让读屏行为不可预期。",
|
||
"关闭按钮 .kole-message-close 是 span 而非 button，没有 aria-label，键盘无法关闭。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "attrs",
|
||
"note": "H5 端没有 props，暴露的是一个页内全局对象 window.KoleMessage；样式靠 .kole-message 叠 is-<type>，容器 .kole-message-wrap 由脚本自建并挂到 body，自动关闭时长走 duration 参数。",
|
||
"table": [
|
||
{
|
||
"name": "kole-message-close",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/MessagePro.html:30）。"
|
||
},
|
||
{
|
||
"name": "kole-message-content",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/MessagePro.html:29）。"
|
||
},
|
||
{
|
||
"name": "kole-message-icon",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/MessagePro.html:28）。"
|
||
}
|
||
]
|
||
},
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/MessagePro.html",
|
||
"kind": "H5 原生",
|
||
"desc": "该端实现（本页 API 与用法的唯一权威来源）。"
|
||
},
|
||
{
|
||
"file": "frameworks/MessagePro.css",
|
||
"kind": "样式",
|
||
"desc": "该组件的样式文件，类名口径以它为准。"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"messagepro-ex-1",
|
||
"messagepro-ex-2",
|
||
"messagepro-ex-3",
|
||
"messagepro-ex-4",
|
||
"messagepro-ex-5"
|
||
],
|
||
"notes": [
|
||
"容器创建见（frameworks/MessagePro.html:21-23），消息结构拼装见（frameworks/MessagePro.html:27-30）。",
|
||
"自动关闭判定见（frameworks/MessagePro.html:35-36），返回 close 见（frameworks/MessagePro.html:37）。",
|
||
"五个便捷方法见（frameworks/MessagePro.html:39-46）。"
|
||
]
|
||
}
|