Skip to content

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

参数类型默认值说明
modelValuestring | number必选,绑定值(与 label 比较决定是否选中),支持 v-model
labelstring | number''必选,本项的值
namestring''原生 name 属性
disabledbooleanfalse是否禁用
beforeChangeBeforeChangeType切换前的钩子,返回 false 阻止切换

Radio Events

事件回调签名说明
change(value: string)值改变时触发

RadioGroup Props

参数类型默认值说明
modelValuestring | number必选,被选中的值,支持 v-model
disabledbooleanfalse整组禁用
directionDirectionType'column'排列方向(row / column
beforeChangeBeforeChangeType切换前的钩子,返回 false 阻止

RadioGroup Events

事件回调签名说明
change(value: string)值改变时触发

Slots

名称说明
default单选框右侧文本

类型定义

ts
type BeforeChangeType = (value: string) => boolean | Promise<boolean>
type DirectionType = 'row' | 'column'

Released under the MIT License.