68 lines
3.6 KiB
JSON
68 lines
3.6 KiB
JSON
{
|
||
"slug": "idcardinput",
|
||
"end": "react",
|
||
"curated": true,
|
||
"summary": "身份证输入：modelValue 受控 18 位号码，组件做加权校验并展示出生日期与性别。",
|
||
"usage": [
|
||
"React 端号码用 modelValue 传入、onChange 上抛大写去非法字符后的值（IDCardInput.jsx:15,29-33）。",
|
||
"校验是国标加权算法：前 17 位按权重求和、用 CHECK 表取模比对第 18 位（IDCardInput.jsx:4-11）。",
|
||
"解析结果用 useMemo 缓存，合法时返回 birth 与 gender 两项（IDCardInput.jsx:12,17）。",
|
||
"提示文案按输入长度分三档：未输入、未满 18 位（带已输入位数）、校验通过或失败（IDCardInput.jsx:21-27）。",
|
||
"输入处理走 onInput：清洗为 0-9 与 X、转大写、截断 18 位后写回 DOM（IDCardInput.jsx:30-31）。"
|
||
],
|
||
"bestPractices": [
|
||
"校验通过后才会渲染出生日期与性别信息块，父组件无需再解析一遍（IDCardInput.jsx:50-55）。",
|
||
"onChange 的是原始号码而不是解析结果，需要出生/性别请在父级复用同样规则或从组件回调之外获取。",
|
||
"invalid 判定要求长度恰为 18 才成立，中途输入不会被标红，体验上避免了误报（IDCardInput.jsx:19）。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "props",
|
||
"note": "React 端的 API 载体是 props 与回调：属性驱动外观（type/size/disabled 等布尔与枚举），交互经 onXxx 回传（如 onChange/onClick/onSelectionChange）；没有 v-model，受控组件固定写成 value + onChange，非受控则用 defaultValue。",
|
||
"table": [
|
||
{
|
||
"name": "modelValue",
|
||
"type": "string",
|
||
"desc": "受控身份证号"
|
||
},
|
||
{
|
||
"name": "placeholder",
|
||
"type": "string",
|
||
"desc": "输入框占位文案"
|
||
},
|
||
{
|
||
"name": "onChange",
|
||
"type": "(value) => void",
|
||
"desc": "值变化回调，参数为大写、去非法字符后的号码"
|
||
}
|
||
]
|
||
},
|
||
"a11y": [
|
||
"输入框无 label/aria-label，个人信息录入场景必须由外层补可读标签（IDCardInput.jsx:40-48）。",
|
||
"校验提示与户籍信息都是普通 div，未使用 aria-live，校验失败不会主动播报。",
|
||
"示例值写在提示文案里（「示例：11010119900307657X」），对读屏是可读的辅助信息，但不应包含真实个人信息。"
|
||
],
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/IDCardInput.jsx",
|
||
"kind": "React（React）",
|
||
"desc": "React 端组件实现源码，props 与回调的唯一定义处"
|
||
},
|
||
{
|
||
"file": "frameworks/IDCardInput.css",
|
||
"kind": "样式",
|
||
"desc": "该 React 实现依赖的样式文件"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"idcardinput-ex-1"
|
||
],
|
||
"notes": [
|
||
"frameworks/IDCardInput.jsx:15 中可指到 modelValue（string）——受控身份证号",
|
||
"frameworks/IDCardInput.jsx:15 中可指到 placeholder（string）——输入框占位文案",
|
||
"frameworks/IDCardInput.jsx:15 中可指到 onChange（(value) => void）——值变化回调，参数为大写、去非法字符后的号码",
|
||
"props 解构清单见 frameworks/IDCardInput.jsx:15-15；本文件 table 只列该端真正消费的属性与回调。",
|
||
"过滤口径：事实包 consumedApi 里还包含绑在组件内部节点上的同名处理器（如 onClick/onChange 绑在内部 button、input、checkbox 上，见 frameworks/IDCardInput.jsx 全文），它们不是对外 props，因此未进 table。",
|
||
"table 构成核验：3 行中 3 行是 frameworks/IDCardInput.jsx 解构出的顶层 props（解构块 frameworks/IDCardInput.jsx:15-15）；本组件 table 全部为顶层 props。"
|
||
]
|
||
}
|