Radio 单选框
在多个备选项中选中一个。
何时使用
- 在一组备选项中选中单一选项。
- 与
<c-radio-group>搭配,在多个 Radio 之间形成互斥关系。
基本使用
直接 v-model 到字符串,与每个 <c-radio> 的 label 比对决定选中状态。
禁用
disabled 让单项不可选;常用于"权限不足 / 暂不开放"。
单选框组
<c-radio-group> 把一组 Radio 收纳到统一的 v-model 下,免去给每个 Radio 单独绑值。
排列方向
direction 切换纵向(默认)/ 横向。
整组禁用
在 <c-radio-group> 上加 disabled 一次性禁用整组。
切换前钩子
before-change 返回 false / Promise<false> 时阻止本次切换,常用于"二次确认"或"先做异步校验"。
监听 change
change 事件返回新值,用于联动其他状态。
API
Radio Props
| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| modelValue | string | number | — | 必选,绑定值(与 label 比较决定是否选中),支持 v-model |
| label | string | number | '' | 必选,本项的值 |
| name | string | '' | 原生 name 属性 |
| disabled | boolean | false | 是否禁用 |
| beforeChange | BeforeChangeType | — | 切换前的钩子,返回 false 阻止切换 |
Radio Events
| 事件 | 回调签名 | 说明 |
|---|---|---|
| change | (value: string) | 值改变时触发 |
RadioGroup Props
| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| modelValue | string | number | — | 必选,被选中的值,支持 v-model |
| disabled | boolean | false | 整组禁用 |
| direction | DirectionType | 'column' | 排列方向(row / column) |
| beforeChange | BeforeChangeType | — | 切换前的钩子,返回 false 阻止 |
RadioGroup Events
| 事件 | 回调签名 | 说明 |
|---|---|---|
| change | (value: string) | 值改变时触发 |
Slots
| 名称 | 说明 |
|---|---|
| default | 单选框右侧文本 |
类型定义
ts
type BeforeChangeType = (value: string) => boolean | Promise<boolean>
type DirectionType = 'row' | 'column'