117 lines
6.0 KiB
JSON
117 lines
6.0 KiB
JSON
{
|
||
"slug": "formmodal",
|
||
"end": "html",
|
||
"curated": true,
|
||
"summary": "纯 H5 表单弹窗：预写 .kole-formmodal-mask 骨架，脚本负责开关与提交前逐字段校验。",
|
||
"usage": [
|
||
"弹窗在页面里预先写好并靠 display 控制：<div class=\"kole-formmodal-mask\" id=\"mask\" style=\"display:none\">，打开时脚本改成 flex、关闭时改回 none（FormModal.html:21,50,53）。",
|
||
"打开入口是普通按钮的 onclick：document.getElementById('open').onclick = function () { mask.style.display = 'flex'; }（FormModal.html:16,50）。",
|
||
"弹层结构固定三段：.kole-formmodal-head（标题加关闭按钮）、.kole-formmodal-body（.kole-form-row 逐行表单）、.kole-formmodal-foot（取消与提交按钮）（FormModal.html:23-43）。",
|
||
"每行表单是「.kole-form-label + .kole-form-input + .kole-form-err」三件套，必填项的标签里手工写 <span class=\"req\">*</span>，错误提示节点默认 display:none（FormModal.html:25-33）。",
|
||
"提交校验在 ok 的 onclick 里手写：姓名非空、邮箱正则 /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/ 逐项判断，并把输入框的 is-error 类与错误节点的 display 一起切换（FormModal.html:55-64）。",
|
||
"校验失败时直接 return，弹窗保持打开；只有全部通过才写 out.textContent 并调用 close() 收起（FormModal.html:64-67）。"
|
||
],
|
||
"bestPractices": [
|
||
"关闭有三个入口（右上 ×、取消按钮、提交成功）都调同一个 close 函数，改动关闭行为时只需改这一处（FormModal.html:51-53）。",
|
||
"点遮罩空白处目前不会关闭：mask 上没有任何点击处理，只有 close/cancel/提交成功这三条路径能关（FormModal.html:48-53）。",
|
||
"校验是「提交时全量重算」，输入过程中不会清除已显示的错误；要即时纠错需要在 input 事件里补 toggle（FormModal.html:61-63）。",
|
||
"第三项「角色」是非必填字段，脚本把它当作永远通过、只取值拼进成功提示，所以错误节点数组只覆盖前两项（FormModal.html:37,65）。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "attrs",
|
||
"note": "H5 端没有组件 API，载体是预置 DOM 结构加 id 钩子与类名：id 负责让脚本取到开关与字段，.kole-formmodal-* 类名负责弹层分区，.is-error 类与 .kole-form-err 节点负责错误显示。",
|
||
"table": [
|
||
{
|
||
"name": "kole-formmodal-mask",
|
||
"type": "基础类名",
|
||
"desc": "全屏遮罩层，fixed + inset:0 + z-index 1000，flex 居中内层弹窗"
|
||
},
|
||
{
|
||
"name": "kole-formmodal",
|
||
"type": "结构类名",
|
||
"desc": "弹窗体，宽 440px、max-width 92vw、圆角 10px、裁掉溢出的圆角"
|
||
},
|
||
{
|
||
"name": "kole-formmodal-head",
|
||
"type": "结构类名",
|
||
"desc": "标题栏，两端对齐，底部 1px 分割线"
|
||
},
|
||
{
|
||
"name": "kole-formmodal-close",
|
||
"type": "结构类名",
|
||
"desc": "右上角 × 按钮，次要文字色，悬停转正文色"
|
||
},
|
||
{
|
||
"name": "kole-formmodal-body",
|
||
"type": "结构类名",
|
||
"desc": "表单主体，内边距 18px"
|
||
},
|
||
{
|
||
"name": "kole-formmodal-foot",
|
||
"type": "结构类名",
|
||
"desc": "按钮行，右对齐，间距 10px，顶部 1px 分割线"
|
||
},
|
||
{
|
||
"name": "kole-form-row",
|
||
"type": "结构类名",
|
||
"desc": "单行字段容器，下外边距 14px"
|
||
},
|
||
{
|
||
"name": "kole-form-label",
|
||
"type": "结构类名",
|
||
"desc": "块级标签，13px 三级文字色"
|
||
},
|
||
{
|
||
"name": "req",
|
||
"type": "修饰类名",
|
||
"desc": "必填星号，错误色，与标签内穿插书写"
|
||
},
|
||
{
|
||
"name": "kole-form-input",
|
||
"type": "控件类名",
|
||
"desc": "输入框：整宽、圆角 6px、padding 8px 10px，聚焦时品牌色边框加 3px 光晕"
|
||
},
|
||
{
|
||
"name": "is-error",
|
||
"type": "状态类名",
|
||
"desc": "加在 .kole-form-input 上把边框改成错误色"
|
||
},
|
||
{
|
||
"name": "kole-form-err",
|
||
"type": "结构类名",
|
||
"desc": "错误文案，12px 错误色，上外边距 4px"
|
||
}
|
||
]
|
||
},
|
||
"a11y": [
|
||
"弹层没有 role=\"dialog\" 与 aria-modal，遮罩与标题都没被声明为对话框；读屏器只知道多了一段 flex 容器（FormModal.html:21-22）。",
|
||
"焦点不迁移也不归还：打开后焦点仍停在触发按钮上，键盘 Tab 可能走到遮罩后面的页面内容（FormModal.html:50）。",
|
||
"字段用的是 <label> 但没写 for 与 id 关联，点击标签文字不会聚焦到对应输入框（FormModal.html:26-27,31-32）。",
|
||
"错误文本是纯视觉提示，未通过 aria-describedby 或 aria-invalid 与输入框关联，读屏器不会播报「姓名不能为空」（FormModal.html:28,33）。"
|
||
],
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/FormModal.html",
|
||
"kind": "纯 H5 演示页（内联样式 + 原生脚本）",
|
||
"desc": "FormModal.html —— 纯 H5 演示页：预置弹窗骨架、id 钩子与 22 行开关加校验脚本"
|
||
},
|
||
{
|
||
"file": "frameworks/FormModal.css",
|
||
"kind": "样式文件",
|
||
"desc": "FormModal.css —— .kole-formmodal-* 分区样式与表单控件、错误态类"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"formmodal-ex-1"
|
||
],
|
||
"notes": [
|
||
"遮罩与弹窗结构：frameworks/FormModal.html:21-45",
|
||
"开关脚本：frameworks/FormModal.html:48-53",
|
||
"提交校验实现：frameworks/FormModal.html:55-67",
|
||
"表单三件套与 req 星号：frameworks/FormModal.html:25-37",
|
||
"样式分区与错误态：frameworks/FormModal.css:2-15",
|
||
"契约 contract.dims 的 columns=one/two 与 state=validating/loading 在实现里没有对应类名或逻辑（表单只有单列，没有加载态），按实现未写入 table。",
|
||
"触发按钮用了 .kole-btn 与 .kole-btn--primary，这两个类不在 FormModal.css 里（属 Button 组件），故未写进 table。"
|
||
]
|
||
}
|