80 lines
3.5 KiB
JSON
80 lines
3.5 KiB
JSON
{
|
||
"slug": "radio",
|
||
"end": "vue3",
|
||
"curated": true,
|
||
"summary": "Vue 3 单选组：按 options 渲染原生 radio 列表，选中值经 v-model 回写。",
|
||
"usage": [
|
||
"v-model 绑定单选值，模板用 :checked=\"props.modelValue === o.value\" 判断选中，每次 change 同时 emit update:modelValue 与 change 两个事件（Radio.vue3.vue:14）。",
|
||
"options 传 [{ label, value }]；不传或传空数组时会渲染内置的「选项 A / 选项 B」两项兜底（Radio.vue3.vue:13）。",
|
||
"统一用 disabled 禁用整组：该布尔直接落到每个原生 input 上，不能只禁用其中一项（Radio.vue3.vue:10）。",
|
||
"选项列表由 optionList computed 归一化，因此 options 变化后无需重挂组件即可刷新（Radio.vue3.vue:13）。",
|
||
"除 update:modelValue 外还额外发一个 pagechange 事件，载荷与 change 相同，属于历史遗留通道（Radio.vue3.vue:14）。"
|
||
],
|
||
"bestPractices": [
|
||
"选中判断是严格相等，value 必须是字符串或数字本身，传对象会在每次渲染时得到 false（Radio.vue3.vue:2）。",
|
||
"原生 radio 的 name 属性没有被设置，同一页面多组单选不会互相干扰，但也无法用原生分组语义做键盘上下键联动（Radio.vue3.vue:2）。",
|
||
"pagechange 与 change 载荷完全一致，新代码只用 change 即可，避免同一动作触发两次副作用（Radio.vue3.vue:14）。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "props",
|
||
"note": "本端是「原生 input + v-model 字符串」的组合：组件不维护内部选中态，显示完全由 props.modelValue 决定。",
|
||
"table": [
|
||
{
|
||
"name": "modelValue",
|
||
"type": "String",
|
||
"desc": "当前选中值，v-model 绑定；默认 a"
|
||
},
|
||
{
|
||
"name": "options",
|
||
"type": "Array",
|
||
"desc": "选项 [{ label, value }]，默认 [] 时使用内置两项兜底"
|
||
},
|
||
{
|
||
"name": "disabled",
|
||
"type": "Boolean",
|
||
"desc": "禁用整组，默认 false；透传到每个原生 input"
|
||
},
|
||
{
|
||
"name": "update:modelValue",
|
||
"type": "emit(payload: String)",
|
||
"desc": "选中项变化时回写新值"
|
||
},
|
||
{
|
||
"name": "change",
|
||
"type": "emit(payload: String)",
|
||
"desc": "与 update:modelValue 同载荷的独立事件"
|
||
},
|
||
{
|
||
"name": "pagechange",
|
||
"type": "emit(payload: String)",
|
||
"desc": "历史遗留事件，载荷与 change 相同"
|
||
}
|
||
]
|
||
},
|
||
"a11y": [
|
||
"外层容器已带 role=\"radiogroup\"，但选项由 label 包裹原生 input 组成，键盘可用箭头键的前提是浏览器认为它们同组（缺 name）——多组并存时需自行验证（Radio.vue3.vue:2）。",
|
||
"radio 有视觉隐藏风险：每项文字靠 label 关联，读屏能读到选项名，但组本身没有 aria-label 说明这组选项在问什么（Radio.vue3.vue:2）。"
|
||
],
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/Radio.vue3.vue",
|
||
"kind": "Vue 3 组件",
|
||
"desc": "radio 的 Vue 3（<script setup>）实现源码"
|
||
},
|
||
{
|
||
"file": "frameworks/Radio.css",
|
||
"kind": "样式",
|
||
"desc": "该组件在 PC 端共用的样式表"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"radio-ex-1",
|
||
"radio-ex-2"
|
||
],
|
||
"notes": [
|
||
"frameworks/Radio.vue3.vue:12 — declareEmits 的三个事件（含 pagechange）",
|
||
"frameworks/Radio.vue3.vue:8 — defineProps 声明 modelValue/options/disabled",
|
||
"frameworks/Radio.vue3.vue:13 — options 为空时回落内置两项"
|
||
]
|
||
}
|