• 单选框
    • 何时使用
    • 代码演示
      • 基本
      • 不可用
      • 按钮样式
      • 填底的按钮样式
      • 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()获取焦点