77 lines
3.4 KiB
JSON
77 lines
3.4 KiB
JSON
{
|
||
"slug": "radio",
|
||
"end": "vue2",
|
||
"curated": true,
|
||
"summary": "Vue 2 端的 radio：prop 叫 modelValue 却只抛 input 与 change，写 v-model 静默不生效，得手写 prop 与回调。",
|
||
"usage": [
|
||
"声明的是 `modelValue`（第 9 行）而回写抛的是 `input`（第 15 行），Vue 2 的 `v-model` 会去传 value 并等 input，两边名字对不上，所以 `v-model` 静默失效。",
|
||
"正确写法是 `:model-value` 加 `@input=\"value = $event\"`（示例即如此），或直接接 `@change`，两者载荷都是被选中的 value。",
|
||
"`:options` 为空数组时会回退到内置的「选项 A / 选项 B」（第 13 行的 optionList 计算属性），所以不传选项也能看到两个单选项。"
|
||
],
|
||
"bestPractices": [
|
||
"selected 判断写的是 `:checked=\"modelValue === o.value\"`（第 2 行），取的是全等比较，因此选项 value 的类型要与传入值一致。",
|
||
"`:disabled` 直接落到原生 input 的 :disabled（第 2 行），整组一起禁用，没有单项禁用的粒度。",
|
||
"change() 一次抛三个事件（第 15 行）：`input`、`change`、`pagechange` 载荷相同，别名多但没有额外语义。"
|
||
],
|
||
"a11y": [
|
||
"根 div 带 role=\"radiogroup\"（第 2 行），分组语义正确；内部用的是原生 input[type=radio]，键盘方向键切换由浏览器提供。",
|
||
"实现没有给每个 label 关联 name 属性，多个分组混在一页时键盘会在组间串动，建议在外部传入区分用的 name。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "props",
|
||
"note": "载体是 props 块 3 项（modelValue/options/disabled，frameworks/Radio.vue2.vue:8-12）加 input、change、pagechange 三个事件；prop 名与事件名不成对，构成已知的双向绑定陷阱。",
|
||
"table": [
|
||
{
|
||
"name": "disabled",
|
||
"type": "属性",
|
||
"desc": "Boolean，落到每个原生 input 的 :disabled（frameworks/Radio.vue2.vue:11,2）"
|
||
},
|
||
{
|
||
"name": "modelValue",
|
||
"type": "String",
|
||
"desc": "双向绑定值（frameworks/Radio.vue2.vue:2）"
|
||
},
|
||
{
|
||
"name": "options",
|
||
"type": "属性",
|
||
"desc": "Array 选项数据，空数组时回退到内置两项（frameworks/Radio.vue2.vue:10,13）"
|
||
},
|
||
{
|
||
"name": "change",
|
||
"type": "(val: any) => void",
|
||
"desc": "值变化时触发（frameworks/Radio.vue2.vue:2）"
|
||
},
|
||
{
|
||
"name": "input",
|
||
"type": "事件",
|
||
"desc": "Vue 2 端实现直接消费的 事件。（frameworks/Radio.vue2.vue:2）"
|
||
},
|
||
{
|
||
"name": "pagechange",
|
||
"type": "事件",
|
||
"desc": "Vue 2 端实现直接消费的 事件。（frameworks/Radio.vue2.vue:15）"
|
||
}
|
||
]
|
||
},
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/Radio.vue2.vue",
|
||
"kind": "Vue 2",
|
||
"desc": "该端实现（本页 API 与用法的唯一权威来源）。"
|
||
},
|
||
{
|
||
"file": "frameworks/Radio.css",
|
||
"kind": "样式",
|
||
"desc": "该组件的样式文件，类名口径以它为准。"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"radio-ex-1",
|
||
"radio-ex-2"
|
||
],
|
||
"notes": [
|
||
"props 声明行 frameworks/Radio.vue2.vue:9-11；三连 emit 在第 15 行 change()，模板第 2 行由原生 @change 触发。",
|
||
"实测差异：声明 modelValue 但没有 model 选项、也不抛 update:modelValue，所以 v-model 不会回写；示例改用 :model-value 加 @input 正是因此。"
|
||
]
|
||
}
|