108 lines
4.2 KiB
JSON
108 lines
4.2 KiB
JSON
{
|
||
"slug": "modal",
|
||
"end": "html",
|
||
"curated": true,
|
||
"summary": "纯 H5 对话框：用模板字符串把遮罩与对话框注入挂载点，点遮罩或任何 data-close 元素即整体清空。",
|
||
"usage": [
|
||
"打开方式是函数式注入：openModal(size) 把整段遮罩+对话框字符串写进 #mount，尺寸通过 kole-modal--<size> 类切换。",
|
||
"关闭是统一的：给遮罩加点击监听，判断 e.target 是遮罩本身或带 data-close 属性，任一成立就把挂载点 innerHTML 清空。",
|
||
"取消与确定按钮共用 data-close 标记，所以两者当前都只做关闭；要区分语义请给确定按钮另加 data-act 并单独处理。",
|
||
"尺寸类只有 kole-modal--small / --default / --large 三种，示例通过 openModal 的参数拼进类名。"
|
||
],
|
||
"bestPractices": [
|
||
"挂载点 #mount 放在页面顶层而不是 .demo 内，避免被演示容器的布局或裁切影响。",
|
||
"关闭用 innerHTML = \"\" 会一并销毁对话框内的表单状态，需要保留输入请改成隐藏节点而不是清空。",
|
||
"遮罩点击判定用 e.target === mask，所以对话框本体的点击不会冒泡关闭；若把监听改成捕获阶段要重新处理这个判定。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "attrs",
|
||
"note": "H5 端没有 props，API 载体是类名（.kole-mask、.kole-modal 及尺寸类）加页内脚本函数 openModal(size)，关闭行为靠 data-mask / data-close 钩子识别。",
|
||
"table": [
|
||
{
|
||
"name": "kole-mask",
|
||
"type": "基础类名",
|
||
"desc": "全屏遮罩层，rgba(0,0,0,0.45)"
|
||
},
|
||
{
|
||
"name": "kole-modal",
|
||
"type": "基础类名",
|
||
"desc": "对话框本体，圆角 8px，默认宽 480px"
|
||
},
|
||
{
|
||
"name": "kole-modal--small",
|
||
"type": "尺寸类名",
|
||
"desc": "小尺寸宽度 320px"
|
||
},
|
||
{
|
||
"name": "kole-modal--default",
|
||
"type": "尺寸类名",
|
||
"desc": "默认尺寸宽度 480px"
|
||
},
|
||
{
|
||
"name": "kole-modal--large",
|
||
"type": "尺寸类名",
|
||
"desc": "大尺寸宽度 680px"
|
||
},
|
||
{
|
||
"name": "kole-modal__header",
|
||
"type": "结构类名",
|
||
"desc": "标题区，内含标题文本与关闭按钮"
|
||
},
|
||
{
|
||
"name": "kole-modal__body",
|
||
"type": "结构类名",
|
||
"desc": "正文内容区"
|
||
},
|
||
{
|
||
"name": "kole-modal__footer",
|
||
"type": "结构类名",
|
||
"desc": "底部按钮区，右下角排布"
|
||
},
|
||
{
|
||
"name": "kole-modal__close",
|
||
"type": "结构类名",
|
||
"desc": "右上角关闭按钮，带 aria-label=\"关闭\""
|
||
},
|
||
{
|
||
"name": "btn-base",
|
||
"type": "按钮类名",
|
||
"desc": "页脚按钮基础类，与 btn-primary / btn-ghost 组合"
|
||
},
|
||
{
|
||
"name": "data-mask",
|
||
"type": "data-* 钩子",
|
||
"desc": "标记遮罩节点，脚本给它挂点击关闭"
|
||
},
|
||
{
|
||
"name": "data-close",
|
||
"type": "data-* 钩子",
|
||
"desc": "标记会触发关闭的元素，取消与确定按钮都带"
|
||
}
|
||
]
|
||
},
|
||
"a11y": [
|
||
"对话框容器带 role=\"dialog\"，但缺少 aria-modal 与 aria-labelledby，标题「提示」是普通 span，读屏器拿不到对话框名。",
|
||
"实现没有焦点圈定与 Esc 关闭：打开后焦点不移动，键盘用户请自行补缺。",
|
||
"关闭按钮带 aria-label=\"关闭\"，取消/确定是原生 button，基础键盘操作可用。"
|
||
],
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/Modal.html",
|
||
"kind": "纯 H5 演示页（内联样式 + 原生脚本）",
|
||
"desc": "Modal.html —— 纯 H5 演示页：三个尺寸入口按钮、模板字符串注入的对话框结构与 26 行开关脚本"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"modal-ex-1",
|
||
"modal-ex-2",
|
||
"modal-ex-3"
|
||
],
|
||
"notes": [
|
||
"对话框语义在注入的模板里，见（frameworks/Modal.html:55）",
|
||
"遮罩钩子见（frameworks/Modal.html:54）",
|
||
"关闭按钮的标注见（frameworks/Modal.html:58）",
|
||
"遮罩点击的关闭判定见（frameworks/Modal.html:70）",
|
||
"关闭动作直接清空挂载点，见（frameworks/Modal.html:70）"
|
||
]
|
||
}
|