75 lines
3.4 KiB
JSON
75 lines
3.4 KiB
JSON
{
|
||
"slug": "phoneinput",
|
||
"end": "html",
|
||
"curated": true,
|
||
"summary": "原生 H5 手机号输入：区号用原生 select，脚本剥离非数字字符并按区号规则给出格式提示。",
|
||
"usage": [
|
||
"标记里区号 select 与号码 input 都是静态写好的原生控件，脚本按 id 取用后接事件，结构不像 React 端那样由常量表渲染。",
|
||
"号码过滤与 React 端一致：正则在 input 值上剥掉非数字并截断，再把结果写回输入框。",
|
||
"区号切换会重新触发校验，提示文本随区号与号码的组合在初始提示、格式正确、格式不正确三种状态间切换。",
|
||
"校验规则同样分叉：中国区号要求 1 开头的 11 位手机号，其它区号只判断长度区间。",
|
||
"正确与错误状态通过提示节点的 ok / error 类表达，没有使用 is-* 命名，与其它 HTML 组件的状态类口径不同。"
|
||
],
|
||
"bestPractices": [
|
||
"本组件的状态表达用 ok 与 error 两个裸类名，不是 is-* 前缀，样式与其它组件不通用，接入时要留意口径差异。",
|
||
"区号选项在 HTML 里逐条手写，增删国家要同时改标记与脚本里的校验分支，容易漏改。",
|
||
"脚本通过 id 直接取节点，同页面放两个实例会互相覆盖，需要改成按容器遍历初始化。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "attrs",
|
||
"note": "HTML 端无 props，载体为：原生 select 与 input 承担输入、kole-phone-* 类名定结构、提示节点上的 ok 与 error 类表达校验结果，没有 data-* 行为钩子。",
|
||
"table": [
|
||
{
|
||
"name": "kole-phone",
|
||
"type": "类名",
|
||
"desc": "整体容器，承载聚焦与错误状态"
|
||
},
|
||
{
|
||
"name": "kole-phone-code",
|
||
"type": "类名",
|
||
"desc": "区号下拉的原生 select，选项在标记里逐条写好"
|
||
},
|
||
{
|
||
"name": "kole-phone-input",
|
||
"type": "类名",
|
||
"desc": "号码输入的原生 input，脚本在输入时剥掉非数字字符"
|
||
},
|
||
{
|
||
"name": "kole-phone-tip",
|
||
"type": "类名",
|
||
"desc": "格式提示位，按结果叠加 ok 或 error 类"
|
||
},
|
||
{
|
||
"name": "role",
|
||
"type": "group / 无",
|
||
"desc": "输入框所在节点上的分组标记，不改变交互行为"
|
||
}
|
||
]
|
||
},
|
||
"a11y": [
|
||
"提示文案与输入框之间没有 aria-describedby 关联，读屏器不会自动读出格式要求。",
|
||
"区号 select 没有 label，仅靠选项文本表达含义。",
|
||
"校验结果只在提示节点的类名与文字上体现，没有 aria-invalid，也没有 aria-live 播报变化。"
|
||
],
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/PhoneInput.html",
|
||
"kind": "HTML 实现",
|
||
"desc": "PhoneInput.html —— 本端实现全文（结构、事件与状态逻辑）"
|
||
},
|
||
{
|
||
"file": "frameworks/PhoneInput.css",
|
||
"kind": "样式文件",
|
||
"desc": "frameworks/PhoneInput.css —— 本端 kole-* 类名与 is-* 状态类的样式定义"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"phoneinput-ex-1"
|
||
],
|
||
"notes": [
|
||
"静态结构见 frameworks/PhoneInput.html:17-28，区号选项见第 18-23 行。",
|
||
"号码过滤 format 与输入接线见 frameworks/PhoneInput.html:36 与第 49 行。",
|
||
"校验分叉见 frameworks/PhoneInput.html:39-47，is-error 加在根节点见第 47 行，聚焦态见第 51-52 行。"
|
||
]
|
||
}
|