单选框
基础使用
选择:
<os-radio v-model="currentValue" label="1">大闸蟹</os-radio>
<os-radio v-model="currentValue" label="2">兰花蟹</os-radio>
<os-radio v-model="currentValue" label="3">青蟹</os-radio>
<div>选择:{{currentValue}}</div>
禁用状态
<os-radio v-model="currentValue" label="1" disabled>大闸蟹</os-radio>
<os-radio label="2" disabled>兰花蟹</os-radio>
<os-radio label="3" disabled>青蟹</os-radio>
单选框组
适用于在多个互斥的选项中选择的场景
选择的值:1
单选框组禁用状态
<os-radio-group v-model="groupValue">
<os-radio label="1">大闸蟹</os-radio>
<os-radio label="2">兰花蟹</os-radio>
<os-radio label="3">青蟹</os-radio>
</os-radio-group>
<div>选择的值:{{groupValue}}</div>
<os-radio-group v-model="groupValue" disabled>
<os-radio label="1">大闸蟹</os-radio>
<os-radio label="2">兰花蟹</os-radio>
<os-radio label="3">青蟹</os-radio>
</os-radio-group>
带有边框
<os-radio label="1" border size="large" disabled v-model="groupValue">大闸蟹</os-radio>
<os-radio label="2" border>兰花蟹</os-radio>
<os-radio label="3" border size="small">青蟹</os-radio>
<os-radio label="4" border size="mini">帝王蟹</os-radio>
按钮样式
<template>
<os-radio-group v-model="groupValue" button>
<os-radio label="1">大闸蟹</os-radio>
<os-radio label="2">兰花蟹</os-radio>
<os-radio label="3">青蟹</os-radio>
</os-radio-group>
</template>
Radio 属性
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
value/v-model | 绑定值 | string/number/boolean | -- | -- |
label | Radio的值 | string/number/boolean | -- | -- |
disabled | 是否禁用 | boolean | -- | false |
border | 是否显示边框 | boolean | -- | false |
size | Radio 的尺寸,仅在 border 为真时有效 | string | large/medium/small/mini | medium |
Radio-group 属性
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
value/v-model | 绑定值 | string/number/boolean | -- | -- |
button | 是否显示为按钮样式 | boolean | -- | false |
disabled | 是否禁用 | boolean | -- | false |
Radio-group 事件
事件名称 | 说明 | 回调参数 |
---|---|---|
change | 绑定值发生变化触发的事件 | 选中的Radio label值 |