仅桌面端保证样式
Radio 单选框
一组互斥的选项控件:在 eb-radio-group 中放置若干 eb-radio(或按钮风格的 eb-radio-button),由 group 统一管理选中值并通过 provide/inject 下发,label 即选项值,插槽内容为显示文案。在 eb-form 中 change 时机自动触发校验。
基础用法
v-model 绑定选中项的 label;单个 radio 设置 disabled 只禁用自身(如上例深圳),适合个别选项不可用的场景。
整组禁用
group 设置 disabled 后整组不可选,常用于权限不足或前置条件未满足时的回显展示。
边框与按钮风格
border 让 Radio 呈卡片描边样式(激活态描边可用 group 的 fill 定制);eb-radio-button 为连体按钮组风格,视觉上更紧凑。
尺寸
group 的 size 统一控制组内尺寸(子项单独设置会被 group 覆盖),border 与按钮风格均生效。
自定义激活色
group 的 fill 定制 border 模式激活态描边色(默认主色 #175DFF);text-color 为按钮模式激活态文字色,适合按语义着色(如通过绿、驳回红)。
组合场景:通知偏好
表单里常见的两级选择:通知渠道用按钮风格、推送频率用常规风格,各自独立绑定互不影响。
API
RadioGroup Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| v-model | 绑定值(选中项的 label),组内所有子项共享 | string | number | boolean | |
| size | 组内尺寸,支持 large / small,子项单独设置会被覆盖 | string | |
| disabled | 禁用整组 | boolean | false |
| name | 组内原生 radio 的 name(子项可覆盖) | string | — |
| text-color | 激活态文字颜色 | string | #ffffff |
| fill | 激活态填充 / 描边色(border 模式生效,默认主色) | string | #175DFF |
Radio Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| v-model | 独立使用时的绑定值(在 group 内由 group 接管) | string | number | boolean | |
| label | 选项值;无插槽内容时兼作显示文案 | string | number | boolean | |
| disabled | 禁用(与 group disabled 叠加) | boolean | false |
| border | 卡片描边样式 | boolean | false |
| size | 尺寸(优先级低于 group) | string | |
| name | 原生 name 属性,缺省继承 group 的 name | string | — |
RadioButton Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| v-model | 独立使用时的绑定值 | string | number | boolean | |
| label | 选项值;无插槽内容时兼作显示文案 | string | number | boolean | |
| disabled | 禁用(与 group disabled 叠加) | boolean | false |
| size | 尺寸(优先级低于 group) | string | |
| name | 原生 name 属性,缺省继承 group 的 name | string | — |
Events
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| update:modelValue / change | 选中值变化,返回新选中项的 label(RadioGroup 与子项均触发) | (value: string | number | boolean) => void | — |
Slots
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| default | Radio / RadioButton 的显示文案,缺省显示 label | — | — |
Methods
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| focus | 使内部原生 radio 聚焦(Radio、RadioButton) | () => void | — |
| blur | 使内部原生 radio 失焦(Radio、RadioButton) | () => void | — |