主题
Radio 单选框
使用
在一组备选项中进行单选
基础用法
单选框不应该有太多的可选项, 如果你有很多的可选项你应该使用选择框而不是单选框。
要使用 Radio
组件,只需要设置v-model
绑定变量, 选中意味着变量的值为相应 Radio value
属性的值, value
可以是String
、Number
或 Boolean
。
自定义颜色
使用color
属性可以自定义单选框的颜色。
禁用状态
disabled
属性可以用来控制单选框的禁用状态。
你只需要为单选框设置 disabled
属性就能控制其禁用状态。
单选框组
适用于在多个互斥的选项中选择的场景
结合k-radio-group
元素和子元素k-radio
可以实现单选组, 为 k-radio-group
绑定 v-model
,再为 每一个 k-radio
设置好 label
属性即可, 另外,还可以通过 change
事件来响应变化,它会传入一个参数 value
来表示改变之后的值。
按钮样式
你可以让单选框看起来像一个按钮一样。
只需要添加button
属性即可, 此外,还提供了 size 属性用来控制单选框的大小。
API
Radio Props
参数名 | 描述 | 类型 | 默认值 |
---|---|---|---|
model-value/v-model | 选中项绑定值 | string | number | boolean | - |
value | 单选框的值 | string | number | boolean | - |
label | 单选框的label如果value没有值,label则作为value使用 | string | number | boolean | - |
size | radio尺寸 | enum | base |
disabled | 是否禁用 | boolean | false |
border | 是否显示边框 | boolean | false |
color | 自定义填充颜色 | string | #2882FF |
button | 是否显示按钮样式,建议配合KRadioGroup使用 | boolean | false |
name | 原生name属性 | string | - |
Radio Slots
插槽名 | 描述 | 参数 |
---|---|---|
default | 默认插槽内容 | - |
RadioGroup Props
参数名 | 描述 | 类型 | 默认值 |
---|---|---|---|
model-value/v-model | 绑定值 | string[] | number[] | [] |
size | radio尺寸 | enum | base |
disabled | 是否禁用 | boolean | false |
color | button不为true时自定义填充颜色 | string | #2882FF |
button | 是否显示按钮样式 | boolean | false |
text-color | 按钮形式的radio激活时的文本颜色 | string | - |
fill | 按钮形式的radio激活时的填充色和边框色 | string | - |
direction | 复选框组元素标签 | enum | row |
RadioGroup Events
事件名 | 描述 | 类型 |
---|---|---|
change | 当绑定值变化时触发的事件 | Function |
RadioGroup Slots
插槽名 | 描述 | 参数 |
---|---|---|
default | 默认插槽内容 | - |