单选框

单选框。

何时使用

  • 用于在多个备选项中选中单个状态。
  • 和 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()获取焦点