• 单选框
    • 何时使用
    • 代码演示
      • 基本
      • 不可用
      • 按钮样式
      • 填底的按钮样式
      • RadioGroup 垂直
      • RadioGroup 组合 - 配置方式
      • 单选组合 - 配合 name 使用
      • 单选组合
      • 大小
  • API
    • Radio
    • RadioGroup
    • RadioGroup 事件
  • 方法
    • Radio

    单选框

    单选框。

    何时使用

    • 用于在多个备选项中选中单个状态。
    • 和 Select 的区别是，Radio 所有选项默认可见，方便用户在比较中选择，因此选项不宜过多。

    代码演示

    Radio单选框 - 图1

    基本

    最简单的用法。

    1. <template>
    2.   <a-radio>Radio</a-radio>
    3. </template>

    Radio单选框 - 图2

    不可用

    Radio 不可用。

    1. <template>
    2.   <div>
    3.     <a-radio :defaultChecked="false" :disabled="disabled">Disabled</a-radio>
    4.     <br />
    5.     <a-radio defaultChecked :disabled="disabled">Disabled</a-radio>
    6.     <div :style="{ marginTop: 20 }">
    7.       <a-button type="primary" @click="toggleDisabled">
    8.         Toggle disabled
    9.       </a-button>
    10.     </div>
    11.   </div>
    12. </template>
    13. <script>
    14. export default {
    15.   data () {
    16.     return {
    17.       disabled: true,
    18.     }
    19.   },
    20.   methods: {
    21.     toggleDisabled () {
    22.       this.disabled = !this.disabled
    23.     },
    24.   },
    25. }
    26. </script>

    Radio单选框 - 图3

    按钮样式

    按钮样式的单选组合。

    1. <template>
    2.   <div>
    3.     <div>
    4.       <a-radio-group @change="onChange" v-model="value">
    5.         <a-radio-button value="a">Hangzhou</a-radio-button>
    6.         <a-radio-button value="b">Shanghai</a-radio-button>
    7.         <a-radio-button value="c">Beijing</a-radio-button>
    8.         <a-radio-button value="d">Chengdu</a-radio-button>
    9.       </a-radio-group>
    10.     </div>
    11.     <div :style="{ marginTop: '16px' }">
    12.       <a-radio-group @change="onChange" defaultValue="a">
    13.         <a-radio-button value="a">Hangzhou</a-radio-button>
    14.         <a-radio-button value="b" disabled>Shanghai</a-radio-button>
    15.         <a-radio-button value="c">Beijing</a-radio-button>
    16.         <a-radio-button value="d">Chengdu</a-radio-button>
    17.       </a-radio-group>
    18.     </div>
    19.     <div :style="{ marginTop: '16px' }">
    20.       <a-radio-group disabled @change="onChange" defaultValue="a">
    21.         <a-radio-button value="a">Hangzhou</a-radio-button>
    22.         <a-radio-button value="b">Shanghai</a-radio-button>
    23.         <a-radio-button value="c">Beijing</a-radio-button>
    24.         <a-radio-button value="d">Chengdu</a-radio-button>
    25.       </a-radio-group>
    26.     </div>
    27.   </div>
    28. </template>
    29. <script>
    30. export default {
    31.   data () {
    32.     return {
    33.       value: 'a',
    34.     }
    35.   },
    36.   methods: {
    37.     onChange (e) {
    38.       console.log(`checked = ${e.target.value}`)
    39.     },
    40.   },
    41. }
    42. </script>

    Radio单选框 - 图4

    填底的按钮样式

    实色填底的单选按钮样式。

    1. <template>
    2.   <div>
    3.     <div>
    4.       <a-radio-group defaultValue="a" buttonStyle="solid">
    5.         <a-radio-button value="a">Hangzhou</a-radio-button>
    6.         <a-radio-button value="b">Shanghai</a-radio-button>
    7.         <a-radio-button value="c">Beijing</a-radio-button>
    8.         <a-radio-button value="d">Chengdu</a-radio-button>
    9.       </a-radio-group>
    10.     </div>
    11.     <div :style="{ marginTop: '16px' }">
    12.       <a-radio-group defaultValue="c" buttonStyle="solid">
    13.         <a-radio-button value="a">Hangzhou</a-radio-button>
    14.         <a-radio-button value="b" disabled>Shanghai</a-radio-button>
    15.         <a-radio-button value="c">Beijing</a-radio-button>
    16.         <a-radio-button value="d">Chengdu</a-radio-button>
    17.       </a-radio-group>
    18.     </div>
    19.   </div>
    20. </template>

    Radio单选框 - 图5

    RadioGroup 垂直

    垂直的 RadioGroup，配合更多输入框选项。

    1. <template>
    2.   <a-radio-group @change="onChange" v-model="value">
    3.     <a-radio :style="radioStyle" :value="1">Option A</a-radio>
    4.     <a-radio :style="radioStyle" :value="2">Option B</a-radio>
    5.     <a-radio :style="radioStyle" :value="3">Option C</a-radio>
    6.     <a-radio :style="radioStyle" :value="4">
    7.       More...
    8.       <a-input v-if="value === 4" :style="{ width: 100, marginLeft: 10 }" />
    9.     </a-radio>
    10.   </a-radio-group>
    11. </template>
    12. <script>
    13. export default {
    14.   data () {
    15.     return {
    16.       value: 1,
    17.       radioStyle: {
    18.         display: 'block',
    19.         height: '30px',
    20.         lineHeight: '30px',
    21.       },
    22.     }
    23.   },
    24.   methods: {
    25.     onChange (e) {
    26.       console.log('radio checked', e.target.value)
    27.     },
    28.   },
    29. }
    30. </script>

    Radio单选框 - 图6

    RadioGroup 组合 - 配置方式

    通过配置 options 参数来渲染单选框。

    1. <template>
    2. <div>
    3.   <a-radio-group :options="plainOptions" @change="onChange1" :defaultValue="value1" />
    4.   <br />
    5.   <a-radio-group :options="options" @change="onChange2" v-model="value2" />
    6.   <br />
    7.   <a-radio-group :options="optionsWithDisabled" disabled @change="onChange3" v-model="value3" />
    8. </div>
    9. </template>
    10. <script>
    11. const plainOptions = ['Apple', 'Pear', 'Orange']
    12. const options = [
    13.   { label: 'Apple', value: 'Apple' },
    14.   { label: 'Pear', value: 'Pear' },
    15.   { label: 'Orange', value: 'Orange' },
    16. ]
    17. const optionsWithDisabled = [
    18.   { label: 'Apple', value: 'Apple' },
    19.   { label: 'Pear', value: 'Pear' },
    20.   { label: 'Orange', value: 'Orange', disabled: false },
    21. ]
    22. export default {
    23.   data () {
    24.     return {
    25.       plainOptions,
    26.       options,
    27.       optionsWithDisabled,
    28.       value1: 'Apple',
    29.       value2: 'Apple',
    30.       value3: 'Apple',
    31.     }
    32.   },
    33.   methods: {
    34.     onChange1 (e) {
    35.       console.log('radio1 checked', e.target.value)
    36.     },
    37.     onChange2 (e) {
    38.       console.log('radio2 checked', e.target.value)
    39.     },
    40.     onChange3 (e) {
    41.       console.log('radio3 checked', e.target.value)
    42.     },
    43.   },
    44. }
    45. </script>

    Radio单选框 - 图7

    单选组合 - 配合 name 使用

    可以为 RadioGroup 配置 name 参数，为组合内的 input 元素赋予相同的 name 属性，使浏览器把 RadioGroup 下的 Radio 真正看作是一组（例如可以通过方向键始终在同一组内更改选项）。

    1. <template>
    2.   <a-radio-group name="radioGroup" :defaultValue="1">
    3.     <a-radio :value="1">A</a-radio>
    4.     <a-radio :value="2">B</a-radio>
    5.     <a-radio :value="3">C</a-radio>
    6.     <a-radio :value="4">D</a-radio>
    7.   </a-radio-group>
    8. </template>

    Radio单选框 - 图8

    单选组合

    一组互斥的 Radio 配合使用。

    1. <template>
    2.   <div>
    3.     <a-radio-group @change="onChange" v-model="value">
    4.       <a-radio :value="1">A</a-radio>
    5.       <a-radio :value="2">B</a-radio>
    6.       <a-radio :value="3">C</a-radio>
    7.       <a-radio :value="4">D</a-radio>
    8.     </a-radio-group>
    9.   </div>
    10. </template>
    11. <script>
    12. export default {
    13.   data () {
    14.     return {
    15.       value: 1,
    16.     }
    17.   },
    18.   methods: {
    19.     onChange (e) {
    20.       console.log('radio checked', e.target.value)
    21.     },
    22.   },
    23. }
    24. </script>

    Radio单选框 - 图9

    大小

    大中小三种组合，可以和表单输入框进行对应配合。

    1. <template>
    2.   <div>
    3.     <div>
    4.       <a-radio-group defaultValue="a" size="large">
    5.         <a-radio-button value="a">Hangzhou</a-radio-button>
    6.         <a-radio-button value="b">Shanghai</a-radio-button>
    7.         <a-radio-button value="c">Beijing</a-radio-button>
    8.         <a-radio-button value="d">Chengdu</a-radio-button>
    9.       </a-radio-group>
    10.     </div>
    11.     <div :style="{ marginTop: '16px' }">
    12.       <a-radio-group defaultValue="a">
    13.         <a-radio-button value="a">Hangzhou</a-radio-button>
    14.         <a-radio-button value="b">Shanghai</a-radio-button>
    15.         <a-radio-button value="c">Beijing</a-radio-button>
    16.         <a-radio-button value="d">Chengdu</a-radio-button>
    17.       </a-radio-group>
    18.     </div>
    19.     <div :style="{ marginTop: '16px' }">
    20.       <a-radio-group defaultValue="a" size="small">
    21.         <a-radio-button value="a">Hangzhou</a-radio-button>
    22.         <a-radio-button value="b">Shanghai</a-radio-button>
    23.         <a-radio-button value="c">Beijing</a-radio-button>
    24.         <a-radio-button value="d">Chengdu</a-radio-button>
    25.       </a-radio-group>
    26.     </div>
    27.   </div>
    28. </template>

    API

    Radio

    参数说明类型默认值
    autoFocus自动获取焦点booleanfalse
    checked指定当前是否选中booleanfalse
    defaultChecked初始是否选中booleanfalse
    value根据 value 进行比较，判断是否选中any-

    RadioGroup

    单选框组合，用于包裹一组 Radio。

    参数说明类型默认值
    defaultValue默认选中的值any-
    disabled禁选所有子单选器booleanfalse
    nameRadioGroup 下所有 input[type="radio"] 的 name 属性string-
    options以配置形式设置子元素string[] | Array<{ label: string value: string disabled?: boolean }>-
    size大小，只对按钮样式生效large | default | smalldefault
    value(v-model)用于设置当前选中的值any-
    buttonStyleRadioButton 的风格样式，目前有描边和填色两种风格outline | solidoutline

    RadioGroup 事件

    事件名称说明回调参数
    change选项变化时的回调函数Function(e:Event)

    方法

    Radio

    名称描述
    blur()移除焦点
    focus()获取焦点