前端UI组件跨平台【免费下载链接】quasarQuasar Framework - Build high-performance VueJS user interfaces in record time项目地址https://gitcode.com/gh_mirrors/qu/quasar点击查看免费下载导读QRadio 是 Quasar Framework 中用于多选一场景的基础输入组件本文基于 radio.md 官方文档并结合仓库源码QRadio.js、QRadio.json 及 QRadio 示例集展开系统讲解其 v-model 双向绑定机制、val取值原理、图标定制、颜色与尺寸控制、原生表单提交以及 v2.25 引入的无障碍支持。读完本文你将能在真实项目中熟练使用 QRadio并能在 QOptionGroup、QList 列表与原生form中正确落地。[!TIP] 若需要批量创建一组单选框建议优先参考 QOptionGroup它能显著简化分组管理相关组件还包括 QButtonToggle、QCheckbox 与 QToggle。一、QRadio 是什么QRadio 是 Quasar 中又一个基础用户输入元素用于让用户从多个候选项中选择一个。它拥有 Material Design 风格的圆形选中指示与 QCheckbox 的多选语义相对天然表达互斥单选语义。组件的完整 API 定义props、slots、events、methods位于 QRadio.json其核心数据结构为model-valueAnyv-model 绑定的当前值valAny必填该选项对应的实际取值选中时 v-model 会被改写为此值labelString显示在控件旁的文案也可用默认插槽代替其余行为类属性left-label、checked-icon、unchecked-icon、color、keep-color、dark、dense、disable、tabindex。从源码 QRadio.js 可以看到组件 props 组合了useDarkPropsdark、useSizePropssize与useFormPropsname、no-error-icon等表单注入相关属性说明 QRadio 深度集成了 Quasar 的暗色模式、尺寸体系与原生表单注入机制。二、基础用法v-model 与 val 的选中即取值QRadio 的判断逻辑非常简单当modelValue与val严格相等时该单选框处于选中状态。源码中通过toRaw对两者进行原始值比较QRadio.jsconst isTrue computed(() toRaw(props.modelValue) toRaw(props.val))因此一组单选框只需共享同一个v-model变量即可天然实现互斥选中某一个时modelValue被改写为该选项的val其余选项因值不相等而自动取消选中。标准用法示例完整源码见 Standard.vuetemplate div classq-pa-md div classq-gutter-sm q-radio v-modelshape valline labelLine / q-radio v-modelshape valrectangle labelRectangle / q-radio v-modelshape valellipse labelEllipse / q-radio v-modelshape valpolygon labelPolygon / /div div classq-px-sm Your selection is: strong{{ shape }}/strong /div /div /template script setup import { ref } from vue const shape ref(line) /script点击行为在源码 QRadio.js 中定义只有当组件未禁用且当前未选中时才会触发emit(update:modelValue, props.val, e)事件同时携带原生事件对象evt见 QRadio.json。[!NOTE]val可以是任意类型字符串、数字、对象等。但由于原生表单提交时所有值都会被转换为字符串见下文原生表单提交若需要走原生表单路径请避免使用对象作为val。三、自定义图标checked-icon 与 unchecked-icon默认情况下 QRadio 使用内联 SVG 渲染圆形指示器源码 createSvg 用两段 path 分别绘制外环与内圈对勾。若希望换成图标可通过checked-icon与unchecked-icon指定选中/未选中状态下的 Material 图标名。示例完整源码见 WithIcons.vueq-radio v-modelshape checked-icontask_alt unchecked-iconpanorama_fish_eye valline labelLine /源码实现中icon计算属性会根据选中状态取对应图标QRadio.jsconst icon computed( () (isTrue.value ? props.checkedIcon : props.uncheckedIcon) || null )当icon不为空时组件改用QIcon渲染图标容器q-radio__icon-container否则渲染默认 SVGQRadio.js。四、紧凑模式dense在高密度界面如列表、工具栏中可通过dense属性缩小单选框的垂直内边距。示例完整源码见 Dense.vueq-radio dense v-modelshape valline labelLine /dense会为根节点追加q-radio--dense类QRadio.js实际间距由 QRadio.sass 中的样式规则控制。五、颜色控制color 与 keep-color通过color属性可以指定选中状态的颜色如teal、orange、red、cyan值为 Quasar 调色板中的颜色名。默认行为是仅选中时显示该颜色若希望未选中时也保留颜色需要同时设置keep-color。对比示例完整源码见 Coloring.vue!-- 第一行仅选中时显示颜色 -- q-radio v-modelcolor valteal labelTeal colorteal / q-radio v-modelcolor valorange labelOrange colororange / !-- 第二行keep-color 保留颜色未选中也着色 -- q-radio keep-color v-modelcolor valteal labelTeal colorteal / q-radio keep-color v-modelcolor valorange labelOrange colororange /源码中innerClass计算属性印证了这一逻辑QRadio.jsconst color props.color ! void 0 (props.keepColor || isTrue.value) ? text-${props.color} : 即颜色类名text-color仅在「指定了 color 且keep-color 为真或处于选中态」时生效。六、强制暗色模式dark在深色背景上使用 QRadio 时可加dark属性强制使用暗色样式适用于浅色页面上嵌入深色区块的场景反之亦然。示例完整源码见 OnDarkBackground.vuediv classq-pa-md bg-grey-9 text-white q-radio dark v-modelshape valline labelLine / q-radio dark v-modelshape valrectangle labelRectangle / /divdark来自useDarkProps组件通过useDark组合式函数解析最终暗色状态选中时根节点会追加q-radio--dark类QRadio.js。七、禁用状态disabledisable属性会同时完成三件事阻断点击onClick中判断!props.disable、追加disabled类、将tabindex置为-1源码 QRadio.js并输出aria-disabledtrue见无障碍章节。示例完整源码见 Disable.vueq-radio disable v-modelshape valline labelLine /八、标签位置left-label默认标签显示在控件右侧设置left-label后标签移到左侧。可同时与dense组合使用完整源码见 LabelPosition.vueq-radio left-label v-modelshape valline labelLine / !-- 左侧标签 紧凑模式 -- q-radio left-label dense v-modelshape valrectangle labelRectangle /源码中leftLabel为根节点追加reverse类实现左右翻转QRadio.js。九、尺寸控制size 与标准尺寸除标准尺寸外size属性支持任意自定义值如150px、2em示例完整源码见 StandardSizes.vueq-radio sizexs v-modelshape valxs labelSize xs / q-radio sizesm v-modelshape valsm labelSize sm / q-radio sizemd v-modelshape valmd labelSize md / q-radio sizelg v-modelshape vallg labelSize lg / q-radio sizexl v-modelshape valxl labelSize xl / !-- 自定义尺寸 -- q-radio size150px v-modelshape val150px labelSize 150px /size来自useSizeProps见 QRadio.json 的 mixins 声明最终通过getOptionSizeStyle工具option-sizes.js换算为内联样式作用于圆形控件。十、与 QOptionGroup 配合批量创建单选组当需要管理大量单选项时推荐使用 QOptionGroup只需传入options数组并指定typeradio即可渲染一组互斥单选框且支持为单个选项单独设置color等属性。示例完整源码见 OptionGroup.vuetemplate div classq-pa-md q-option-group :optionsoptions typeradio v-modelgroup / /div /template script setup import { ref } from vue const group ref(null) const options [ { label: Battery too low, value: bat }, { label: Friend request, value: friend, color: green }, { label: Picture uploaded, value: upload, color: red } ] /scriptQOptionGroup 的完整能力包括 disabled、dense、尺寸等透传参见 option-group.md。十一、与 QItem 配合可点击的列表式单选项在 QList 中嵌入 QRadio 时将q-item的tag设为label并使用v-ripple添加涟漪效果即可让整行 QItem 响应点击切换选中状态。示例完整源码见 InaList.vueq-list q-item taglabel v-ripple q-item-section avatar q-radio v-modelcolor valteal colorteal / /q-item-section q-item-section q-item-labelTeal/q-item-label /q-item-section /q-item q-item taglabel v-ripple q-item-section avatar q-radio v-modelcolor valorange colororange / /q-item-section q-item-section q-item-labelOrange/q-item-label q-item-label captionWith description/q-item-label /q-item-section /q-item /q-list其实现要点在于QRadio 内部始终渲染一个隐藏的原生input typeradio即使未指定name源码注释明确说明该原生 input 负责让包裹它的label将点击转发给组件QRadio.js这正是q-item taglabel能够联动切换的底层原因。十二、原生表单提交name 属性与 formData当 QRadio 位于带有action与method的原生表单中例如与 ASP.NET 控制器对接必须为 QRadio 指定name属性否则 formData 中不会包含该字段。示例完整源码见 NativeForm.vueq-form submitonSubmit classq-gutter-md q-radio nameshape v-modelshape valline labelLine / q-radio nameshape v-modelshape valrectangle labelRectangle / q-radio nameshape v-modelshape valellipse labelEllipse / q-radio nameshape v-modelshape valpolygon labelPolygon / div q-btn labelSubmit typesubmit colorprimary / /div /q-form提交后即可从new FormData(evt.target)中读取以name为键、val为值的字段。源码中formAttrs函数负责生成原生 input 属性QRadio.jsconst formAttrs () { const prop { type: radio } if (props.name ! void 0) { Object.assign(prop, { .checked: isTrue.value, ^checked: isTrue.value ? checked : void 0, name: props.name, value: props.val }) } return prop }再经useFormInject注入到渲染树中。注意原生表单提交时所有值都会被转换为字符串因此这种情况下请不要使用 Object 作为val文档原话见 radio.md。十三、无障碍支持v2.25自 v2.25 起QRadio 内置了完整的无障碍语义详见 radio.md以及源码中根节点属性的实现 QRadio.js无障碍特性实现方式语义角色根节点暴露roleradio选中状态通过aria-checkedtrue/false反映可访问名称labelprop 同时作为aria-label未提供时可用默认插槽内容禁用状态禁用时输出aria-disabledtrue键盘可达可通过Tab聚焦受tabindex属性控制键盘选中Enter或Space触发选中键盘逻辑在源码中有完整对应onKeydown拦截 Enter(13) 与 Space(32) 的默认行为onKeyup中同一键位触发onClick[QRadio.js](https://link.gitcode.com/i/76bdfbd36024051dde6674bb7ed0591e#L41-L45, L141-L145)。tabindex计算为禁用时返回-1否则取传入值或默认0QRadio.js。[!IMPORTANT] 独立的 QRadio 并不感知其兄弟节点每个 QRadio 都是独立的 Tab 停靠点且不存在包裹它们的radiogroup语义。若需要完整的 WAI-ARIA radio group 模式整个组只有一个 Tab 停靠点方向键在组内移动焦点与选中项即 roving tabindex请将单选框包裹在 QOptionGroup 中详见 option-group.md。十四、组件方法setQRadio 暴露了一个公开方法set作用是将该单选框的 v-model 设置为自身的val见 QRadio.json 与源码 QRadio.jsObject.assign(proxy, { set: onClick })即set就是组件内部的点击处理器本身调用它等价于一次程序化点击可在父组件中通过模板引用ref触发选中。十五、默认插槽与 API 速查除label属性外QRadio 的默认插槽也可作为标签内容当未指定label时源码中通过hMergeSlot(slots.default, [props.label])优先合并labelprop 与插槽内容QRadio.js。QRadio.json对插槽的说明为除非指定了 label prop否则默认插槽可用作标签建议使用字符串QRadio.json。属性速查表来自 QRadio.json属性类型说明model-valueAnyv-model 绑定值必填valAny选中时写入 v-model 的实际值必填labelString控件旁显示的文案left-labelBoolean标签显示在左侧checked-iconString选中态图标替换默认设计unchecked-iconString未选中态图标替换默认设计colorString选中态颜色Quasar 调色板keep-colorBoolean未选中时也保留指定颜色darkBoolean强制暗色模式denseBoolean紧凑模式disableBoolean禁用tabindexString/Number焦点 Tab 顺序事件与插槽事件update:model-value—— 需要更新模型时触发v-model 依赖参数为value新模型值与evt原生事件插槽default—— 标签内容label优先。十六、进一步探索组件实现阅读 QRadio.js 可了解渲染函数、表单注入与键盘事件全貌API 定义见 QRadio.json样式定义见 QRadio.sass组件测试见 QRadio.test.js 与 QRadio.hydration.test.js可验证点击、禁用、表单提交等行为全部示例源码见 QRadio 示例目录Standard、WithIcons、Dense、Coloring、OnDarkBackground、Disable、LabelPosition、StandardSizes、OptionGroup、InaList、NativeForm 共 11 个用例关联组件QOptionGroup文档、QButtonToggle文档、QCheckbox文档、QToggle文档。赞分享前端UI组件跨平台【免费下载链接】quasarQuasar Framework - Build high-performance VueJS user interfaces in record time项目地址https://gitcode.com/gh_mirrors/qu/quasar点击查看免费下载相关推荐Quasar QDate 组件完全指南从基础用法到波斯日历、无障碍与表单集成的实战手册Quasar QDate 组件完全指南从基础用法到波斯日历、无障碍与表单集成的实战手册 导读 本文以 Quasar Framework 官方文档 QDate前端UI组件跨平台Quasar QList 与 QItem 列表组件完全指南从基础用法到无障碍语义Quasar QList 与 QItem 列表组件完全指南从基础用法到无障碍语义 QList 与 QItem 是 Quasar Framework 中一组协同前端UI组件跨平台Quasar 的 QToolbar 与 QToolbarTitle 组件完全指南从基础用法到无障碍实践Quasar 的 QToolbar 与 QToolbarTitle 组件完全指南从基础用法到无障碍实践 QToolbar 是 Quasar Framework前端UI组件跨平台创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
Quasar 单选框 QRadio 组件完全指南：从基本用法到无障碍表单实战
前端UI组件跨平台【免费下载链接】quasarQuasar Framework - Build high-performance VueJS user interfaces in record time项目地址https://gitcode.com/gh_mirrors/qu/quasar点击查看免费下载导读QRadio 是 Quasar Framework 中用于多选一场景的基础输入组件本文基于 radio.md 官方文档并结合仓库源码QRadio.js、QRadio.json 及 QRadio 示例集展开系统讲解其 v-model 双向绑定机制、val取值原理、图标定制、颜色与尺寸控制、原生表单提交以及 v2.25 引入的无障碍支持。读完本文你将能在真实项目中熟练使用 QRadio并能在 QOptionGroup、QList 列表与原生form中正确落地。[!TIP] 若需要批量创建一组单选框建议优先参考 QOptionGroup它能显著简化分组管理相关组件还包括 QButtonToggle、QCheckbox 与 QToggle。一、QRadio 是什么QRadio 是 Quasar 中又一个基础用户输入元素用于让用户从多个候选项中选择一个。它拥有 Material Design 风格的圆形选中指示与 QCheckbox 的多选语义相对天然表达互斥单选语义。组件的完整 API 定义props、slots、events、methods位于 QRadio.json其核心数据结构为model-valueAnyv-model 绑定的当前值valAny必填该选项对应的实际取值选中时 v-model 会被改写为此值labelString显示在控件旁的文案也可用默认插槽代替其余行为类属性left-label、checked-icon、unchecked-icon、color、keep-color、dark、dense、disable、tabindex。从源码 QRadio.js 可以看到组件 props 组合了useDarkPropsdark、useSizePropssize与useFormPropsname、no-error-icon等表单注入相关属性说明 QRadio 深度集成了 Quasar 的暗色模式、尺寸体系与原生表单注入机制。二、基础用法v-model 与 val 的选中即取值QRadio 的判断逻辑非常简单当modelValue与val严格相等时该单选框处于选中状态。源码中通过toRaw对两者进行原始值比较QRadio.jsconst isTrue computed(() toRaw(props.modelValue) toRaw(props.val))因此一组单选框只需共享同一个v-model变量即可天然实现互斥选中某一个时modelValue被改写为该选项的val其余选项因值不相等而自动取消选中。标准用法示例完整源码见 Standard.vuetemplate div classq-pa-md div classq-gutter-sm q-radio v-modelshape valline labelLine / q-radio v-modelshape valrectangle labelRectangle / q-radio v-modelshape valellipse labelEllipse / q-radio v-modelshape valpolygon labelPolygon / /div div classq-px-sm Your selection is: strong{{ shape }}/strong /div /div /template script setup import { ref } from vue const shape ref(line) /script点击行为在源码 QRadio.js 中定义只有当组件未禁用且当前未选中时才会触发emit(update:modelValue, props.val, e)事件同时携带原生事件对象evt见 QRadio.json。[!NOTE]val可以是任意类型字符串、数字、对象等。但由于原生表单提交时所有值都会被转换为字符串见下文原生表单提交若需要走原生表单路径请避免使用对象作为val。三、自定义图标checked-icon 与 unchecked-icon默认情况下 QRadio 使用内联 SVG 渲染圆形指示器源码 createSvg 用两段 path 分别绘制外环与内圈对勾。若希望换成图标可通过checked-icon与unchecked-icon指定选中/未选中状态下的 Material 图标名。示例完整源码见 WithIcons.vueq-radio v-modelshape checked-icontask_alt unchecked-iconpanorama_fish_eye valline labelLine /源码实现中icon计算属性会根据选中状态取对应图标QRadio.jsconst icon computed( () (isTrue.value ? props.checkedIcon : props.uncheckedIcon) || null )当icon不为空时组件改用QIcon渲染图标容器q-radio__icon-container否则渲染默认 SVGQRadio.js。四、紧凑模式dense在高密度界面如列表、工具栏中可通过dense属性缩小单选框的垂直内边距。示例完整源码见 Dense.vueq-radio dense v-modelshape valline labelLine /dense会为根节点追加q-radio--dense类QRadio.js实际间距由 QRadio.sass 中的样式规则控制。五、颜色控制color 与 keep-color通过color属性可以指定选中状态的颜色如teal、orange、red、cyan值为 Quasar 调色板中的颜色名。默认行为是仅选中时显示该颜色若希望未选中时也保留颜色需要同时设置keep-color。对比示例完整源码见 Coloring.vue!-- 第一行仅选中时显示颜色 -- q-radio v-modelcolor valteal labelTeal colorteal / q-radio v-modelcolor valorange labelOrange colororange / !-- 第二行keep-color 保留颜色未选中也着色 -- q-radio keep-color v-modelcolor valteal labelTeal colorteal / q-radio keep-color v-modelcolor valorange labelOrange colororange /源码中innerClass计算属性印证了这一逻辑QRadio.jsconst color props.color ! void 0 (props.keepColor || isTrue.value) ? text-${props.color} : 即颜色类名text-color仅在「指定了 color 且keep-color 为真或处于选中态」时生效。六、强制暗色模式dark在深色背景上使用 QRadio 时可加dark属性强制使用暗色样式适用于浅色页面上嵌入深色区块的场景反之亦然。示例完整源码见 OnDarkBackground.vuediv classq-pa-md bg-grey-9 text-white q-radio dark v-modelshape valline labelLine / q-radio dark v-modelshape valrectangle labelRectangle / /divdark来自useDarkProps组件通过useDark组合式函数解析最终暗色状态选中时根节点会追加q-radio--dark类QRadio.js。七、禁用状态disabledisable属性会同时完成三件事阻断点击onClick中判断!props.disable、追加disabled类、将tabindex置为-1源码 QRadio.js并输出aria-disabledtrue见无障碍章节。示例完整源码见 Disable.vueq-radio disable v-modelshape valline labelLine /八、标签位置left-label默认标签显示在控件右侧设置left-label后标签移到左侧。可同时与dense组合使用完整源码见 LabelPosition.vueq-radio left-label v-modelshape valline labelLine / !-- 左侧标签 紧凑模式 -- q-radio left-label dense v-modelshape valrectangle labelRectangle /源码中leftLabel为根节点追加reverse类实现左右翻转QRadio.js。九、尺寸控制size 与标准尺寸除标准尺寸外size属性支持任意自定义值如150px、2em示例完整源码见 StandardSizes.vueq-radio sizexs v-modelshape valxs labelSize xs / q-radio sizesm v-modelshape valsm labelSize sm / q-radio sizemd v-modelshape valmd labelSize md / q-radio sizelg v-modelshape vallg labelSize lg / q-radio sizexl v-modelshape valxl labelSize xl / !-- 自定义尺寸 -- q-radio size150px v-modelshape val150px labelSize 150px /size来自useSizeProps见 QRadio.json 的 mixins 声明最终通过getOptionSizeStyle工具option-sizes.js换算为内联样式作用于圆形控件。十、与 QOptionGroup 配合批量创建单选组当需要管理大量单选项时推荐使用 QOptionGroup只需传入options数组并指定typeradio即可渲染一组互斥单选框且支持为单个选项单独设置color等属性。示例完整源码见 OptionGroup.vuetemplate div classq-pa-md q-option-group :optionsoptions typeradio v-modelgroup / /div /template script setup import { ref } from vue const group ref(null) const options [ { label: Battery too low, value: bat }, { label: Friend request, value: friend, color: green }, { label: Picture uploaded, value: upload, color: red } ] /scriptQOptionGroup 的完整能力包括 disabled、dense、尺寸等透传参见 option-group.md。十一、与 QItem 配合可点击的列表式单选项在 QList 中嵌入 QRadio 时将q-item的tag设为label并使用v-ripple添加涟漪效果即可让整行 QItem 响应点击切换选中状态。示例完整源码见 InaList.vueq-list q-item taglabel v-ripple q-item-section avatar q-radio v-modelcolor valteal colorteal / /q-item-section q-item-section q-item-labelTeal/q-item-label /q-item-section /q-item q-item taglabel v-ripple q-item-section avatar q-radio v-modelcolor valorange colororange / /q-item-section q-item-section q-item-labelOrange/q-item-label q-item-label captionWith description/q-item-label /q-item-section /q-item /q-list其实现要点在于QRadio 内部始终渲染一个隐藏的原生input typeradio即使未指定name源码注释明确说明该原生 input 负责让包裹它的label将点击转发给组件QRadio.js这正是q-item taglabel能够联动切换的底层原因。十二、原生表单提交name 属性与 formData当 QRadio 位于带有action与method的原生表单中例如与 ASP.NET 控制器对接必须为 QRadio 指定name属性否则 formData 中不会包含该字段。示例完整源码见 NativeForm.vueq-form submitonSubmit classq-gutter-md q-radio nameshape v-modelshape valline labelLine / q-radio nameshape v-modelshape valrectangle labelRectangle / q-radio nameshape v-modelshape valellipse labelEllipse / q-radio nameshape v-modelshape valpolygon labelPolygon / div q-btn labelSubmit typesubmit colorprimary / /div /q-form提交后即可从new FormData(evt.target)中读取以name为键、val为值的字段。源码中formAttrs函数负责生成原生 input 属性QRadio.jsconst formAttrs () { const prop { type: radio } if (props.name ! void 0) { Object.assign(prop, { .checked: isTrue.value, ^checked: isTrue.value ? checked : void 0, name: props.name, value: props.val }) } return prop }再经useFormInject注入到渲染树中。注意原生表单提交时所有值都会被转换为字符串因此这种情况下请不要使用 Object 作为val文档原话见 radio.md。十三、无障碍支持v2.25自 v2.25 起QRadio 内置了完整的无障碍语义详见 radio.md以及源码中根节点属性的实现 QRadio.js无障碍特性实现方式语义角色根节点暴露roleradio选中状态通过aria-checkedtrue/false反映可访问名称labelprop 同时作为aria-label未提供时可用默认插槽内容禁用状态禁用时输出aria-disabledtrue键盘可达可通过Tab聚焦受tabindex属性控制键盘选中Enter或Space触发选中键盘逻辑在源码中有完整对应onKeydown拦截 Enter(13) 与 Space(32) 的默认行为onKeyup中同一键位触发onClick[QRadio.js](https://link.gitcode.com/i/76bdfbd36024051dde6674bb7ed0591e#L41-L45, L141-L145)。tabindex计算为禁用时返回-1否则取传入值或默认0QRadio.js。[!IMPORTANT] 独立的 QRadio 并不感知其兄弟节点每个 QRadio 都是独立的 Tab 停靠点且不存在包裹它们的radiogroup语义。若需要完整的 WAI-ARIA radio group 模式整个组只有一个 Tab 停靠点方向键在组内移动焦点与选中项即 roving tabindex请将单选框包裹在 QOptionGroup 中详见 option-group.md。十四、组件方法setQRadio 暴露了一个公开方法set作用是将该单选框的 v-model 设置为自身的val见 QRadio.json 与源码 QRadio.jsObject.assign(proxy, { set: onClick })即set就是组件内部的点击处理器本身调用它等价于一次程序化点击可在父组件中通过模板引用ref触发选中。十五、默认插槽与 API 速查除label属性外QRadio 的默认插槽也可作为标签内容当未指定label时源码中通过hMergeSlot(slots.default, [props.label])优先合并labelprop 与插槽内容QRadio.js。QRadio.json对插槽的说明为除非指定了 label prop否则默认插槽可用作标签建议使用字符串QRadio.json。属性速查表来自 QRadio.json属性类型说明model-valueAnyv-model 绑定值必填valAny选中时写入 v-model 的实际值必填labelString控件旁显示的文案left-labelBoolean标签显示在左侧checked-iconString选中态图标替换默认设计unchecked-iconString未选中态图标替换默认设计colorString选中态颜色Quasar 调色板keep-colorBoolean未选中时也保留指定颜色darkBoolean强制暗色模式denseBoolean紧凑模式disableBoolean禁用tabindexString/Number焦点 Tab 顺序事件与插槽事件update:model-value—— 需要更新模型时触发v-model 依赖参数为value新模型值与evt原生事件插槽default—— 标签内容label优先。十六、进一步探索组件实现阅读 QRadio.js 可了解渲染函数、表单注入与键盘事件全貌API 定义见 QRadio.json样式定义见 QRadio.sass组件测试见 QRadio.test.js 与 QRadio.hydration.test.js可验证点击、禁用、表单提交等行为全部示例源码见 QRadio 示例目录Standard、WithIcons、Dense、Coloring、OnDarkBackground、Disable、LabelPosition、StandardSizes、OptionGroup、InaList、NativeForm 共 11 个用例关联组件QOptionGroup文档、QButtonToggle文档、QCheckbox文档、QToggle文档。赞分享前端UI组件跨平台【免费下载链接】quasarQuasar Framework - Build high-performance VueJS user interfaces in record time项目地址https://gitcode.com/gh_mirrors/qu/quasar点击查看免费下载相关推荐Quasar QDate 组件完全指南从基础用法到波斯日历、无障碍与表单集成的实战手册Quasar QDate 组件完全指南从基础用法到波斯日历、无障碍与表单集成的实战手册 导读 本文以 Quasar Framework 官方文档 QDate前端UI组件跨平台Quasar QList 与 QItem 列表组件完全指南从基础用法到无障碍语义Quasar QList 与 QItem 列表组件完全指南从基础用法到无障碍语义 QList 与 QItem 是 Quasar Framework 中一组协同前端UI组件跨平台Quasar 的 QToolbar 与 QToolbarTitle 组件完全指南从基础用法到无障碍实践Quasar 的 QToolbar 与 QToolbarTitle 组件完全指南从基础用法到无障碍实践 QToolbar 是 Quasar Framework前端UI组件跨平台创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考