65 lines
2.9 KiB
JSON
65 lines
2.9 KiB
JSON
{
|
||
"slug": "plateinput",
|
||
"end": "vue2",
|
||
"curated": true,
|
||
"summary": "Vue 2 车牌输入，省份用下拉选择、号牌主体用输入框，输出两段拼接结果。",
|
||
"usage": [
|
||
"Vue 2 端 value 是完整车牌字符串，组件内部把它拆成省份 prov 与主体 body 分别编辑。",
|
||
"省份下拉用原生 <select> 绑定组件的 prov 私有状态，选项来自 provinces prop。",
|
||
"号牌主体输入框 maxlength=\"7\"，placeholder 给出示例 A12345。",
|
||
"派发 input 时传的是 this.prov + this.body 的拼接结果，回填完整车牌。"
|
||
],
|
||
"bestPractices": [
|
||
"provinces 默认是十字开头的省份简写数组，需要更全的列表请显式传入。",
|
||
"省份是组件内部的 v-model 绑定（原生 select 上的 v-model），属于私有状态，外部只能通过 value 初始化。",
|
||
"注意 value 的拆分依赖首字符作为省份，若传入的值没有省份前缀会落到主体里。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "props",
|
||
"note": "Vue 2 端 2 个 prop、1 个 input 事件；省份用原生 select 的 v-model 管理私有状态。",
|
||
"table": [
|
||
{
|
||
"name": "value",
|
||
"type": "String，默认空串",
|
||
"desc": "完整车牌，组件内部拆为省份与主体"
|
||
},
|
||
{
|
||
"name": "provinces",
|
||
"type": "Array，默认十个省份简写",
|
||
"desc": "省份候选，用于渲染原生 select 的 option"
|
||
},
|
||
{
|
||
"name": "input",
|
||
"type": "事件，参数为省份与主体拼接结果",
|
||
"desc": "编辑时派发，v-model 依赖它"
|
||
}
|
||
]
|
||
},
|
||
"a11y": [
|
||
"原生 select 与 input 都可键盘操作，这是本组件无障碍的基础。",
|
||
"两个控件都没有 label，仅靠 placeholder 与选项文字提示，读屏器可读性有限。",
|
||
"校验反馈同样是颜色与提示文本，缺少 aria-invalid 标记。"
|
||
],
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/PlateInput.vue2.vue",
|
||
"kind": "Vue 2 组件实现（Options API 单文件组件）",
|
||
"desc": "PlateInput.vue2.vue —— 本端模板、props 声明、事件派发与样式入口"
|
||
},
|
||
{
|
||
"file": "frameworks/PlateInput.css",
|
||
"kind": "样式文件",
|
||
"desc": "PlateInput.css —— 组件类名与状态类的样式定义，被 .vue2.vue 用 <style src> 引入"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"plateinput-ex-1"
|
||
],
|
||
"notes": [
|
||
"props 声明见 frameworks/PlateInput.vue2.vue:24-27，provinces 默认值在第 26 行。",
|
||
"原生 select 的 v-model=\"prov\" 见 frameworks/PlateInput.vue2.vue:4，主体输入框在第 7-15 行。",
|
||
"input 事件在 frameworks/PlateInput.vue2.vue:59 派发 this.prov + this.body。",
|
||
"事实包 consumedApi 列出了 modelValue，但 frameworks/PlateInput.vue2.vue 全文不存在该词（v-model 只用于内部 prov），本页按实现只写 value。"
|
||
]
|
||
}
|