61 lines
3.4 KiB
JSON
61 lines
3.4 KiB
JSON
{
|
||
"slug": "plateinput",
|
||
"end": "vue3",
|
||
"curated": true,
|
||
"summary": "Vue 3 端车牌输入：modelValue 收完整车牌串，内部拆成省份与号码主体分别编辑。",
|
||
"usage": [
|
||
"v-model 绑的是完整车牌串：实现把 modelValue[0] 当省份、slice(1) 当号码主体（第 29-30 行），传 \"京A12345\" 这种形式。",
|
||
"emit 只发生在号码输入框的 onInput 里，回传的是 prov + body 拼接串（第 46 行），父级拿到的永远是完整车牌。",
|
||
"号码主体会被规范化：转大写、剔除非 A-Z0-9 字符、截到 7 位（第 44 行），粘贴带连字符的内容会被清掉。",
|
||
"省份下拉用 v-model=\"prov\" 绑内部 ref（第 4 行），改省份只改内部状态、不派发事件，此时父级的 v-model 值仍是旧的。",
|
||
"defineProps 只有 modelValue 与 provinces（第 24-27 行），provinces 默认给京沪粤津冀鲁苏浙川渝十个简称（第 26 行）。"
|
||
],
|
||
"bestPractices": [
|
||
"prov 与 body 都是 ref(props.modelValue) 的一次性初始化（第 29-30 行），挂载后父级改 modelValue 不会同步进输入框。",
|
||
"合法判定是两条正则 /^[A-Z][A-Z0-9]{5}$/ 与 {6}（第 33 行），命中后者时 isNewEnergy 为真并在提示里标「新能源」（第 35、39 行）。",
|
||
"提示文案由 tipText 经 v-html 输出（第 17 行），里面拼进了 prov 与 body，改这段时要知道它是 innerHTML 而非文本节点。"
|
||
],
|
||
"a11y": [
|
||
"校验结果只体现在 .kole-plate-field 的 is-valid / is-invalid 类与下方 .kole-plate-tip 文本上（第 3、17 行），输入框没有 aria-invalid，也没用 aria-describedby 挂上提示。",
|
||
"省份是原生 <select>（第 4 行）、号码是原生 <input maxlength=\"7\">（第 7-10 行），键盘与读屏行为由浏览器提供。",
|
||
"提示里还嵌了一个 <span class=\"kole-plate-tag\">（第 39 行），读屏器会把「新能源」当普通文本连读，读不出它是个标记。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "props",
|
||
"note": "本端载体是 modelValue、provinces 两个 props 加 update:modelValue 一个 emit；没有插槽，省份选项由 provinces 数组给出。",
|
||
"table": [
|
||
{
|
||
"name": "modelValue",
|
||
"type": "String",
|
||
"desc": "双向绑定值（frameworks/PlateInput.vue3.vue:25）"
|
||
},
|
||
{
|
||
"name": "provinces",
|
||
"type": "Array",
|
||
"desc": "省份数据（frameworks/PlateInput.vue3.vue:5）"
|
||
}
|
||
]
|
||
},
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/PlateInput.vue3.vue",
|
||
"kind": "Vue 3",
|
||
"desc": "该端实现（本页 API 与用法的唯一权威来源）。"
|
||
},
|
||
{
|
||
"file": "frameworks/PlateInput.css",
|
||
"kind": "样式",
|
||
"desc": "该组件的样式文件，类名口径以它为准。"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"plateinput-ex-1"
|
||
],
|
||
"notes": [
|
||
"props 与 emit 声明见 frameworks/PlateInput.vue3.vue:24-28，provinces 默认十个省简称见第 26 行。",
|
||
"拆值与一次性初始化在 frameworks/PlateInput.vue3.vue:29-30，无 watch 把 modelValue 回写进 prov / body。",
|
||
"省份 select 的 v-model 只改内部 prov（frameworks/PlateInput.vue3.vue:4），emit 唯一发生在 onInput（同文件第 46 行）。",
|
||
"实测该端 prop 名就是 modelValue、emit 名就是 update:modelValue（frameworks/PlateInput.vue3.vue:25、28），v-model 可接通。"
|
||
]
|
||
}
|