Radio单选框 - 图1

单选框

单选框。

何时使用

  • 用于在多个备选项中选中单个状态。

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

    代码演示

Radio

基本

最简单的用法。

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

Radio单选框 - 图2

按钮样式

按钮样式的单选组合。

  1. <template>
  2.   <div>
  3.     <div>
  4.       <a-radio-group v-model="value" @change="onChange">
  5.         <a-radio-button value="a">
  6.           Hangzhou
  7.         </a-radio-button>
  8.         <a-radio-button value="b">
  9.           Shanghai
  10.         </a-radio-button>
  11.         <a-radio-button value="c">
  12.           Beijing
  13.         </a-radio-button>
  14.         <a-radio-button value="d">
  15.           Chengdu
  16.         </a-radio-button>
  17.       </a-radio-group>
  18.     </div>
  19.     <div :style="{ marginTop: '16px' }">
  20.       <a-radio-group default-value="a" @change="onChange">
  21.         <a-radio-button value="a">
  22.           Hangzhou
  23.         </a-radio-button>
  24.         <a-radio-button value="b" disabled>
  25.           Shanghai
  26.         </a-radio-button>
  27.         <a-radio-button value="c">
  28.           Beijing
  29.         </a-radio-button>
  30.         <a-radio-button value="d">
  31.           Chengdu
  32.         </a-radio-button>
  33.       </a-radio-group>
  34.     </div>
  35.     <div :style="{ marginTop: '16px' }">
  36.       <a-radio-group disabled default-value="a" @change="onChange">
  37.         <a-radio-button value="a">
  38.           Hangzhou
  39.         </a-radio-button>
  40.         <a-radio-button value="b">
  41.           Shanghai
  42.         </a-radio-button>
  43.         <a-radio-button value="c">
  44.           Beijing
  45.         </a-radio-button>
  46.         <a-radio-button value="d">
  47.           Chengdu
  48.         </a-radio-button>
  49.       </a-radio-group>
  50.     </div>
  51.   </div>
  52. </template>
  53. <script>
  54. export default {
  55.   data() {
  56.     return {
  57.       value: 'a',
  58.     };
  59.   },
  60.   methods: {
  61.     onChange(e) {
  62.       console.log(`checked = ${e.target.value}`);
  63.     },
  64.   },
  65. };
  66. </script>

Radio单选框 - 图3

RadioGroup 垂直

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

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

Radio单选框 - 图4

单选组合 - 配合 name 使用

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

  1. <template>
  2.   <a-radio-group name="radioGroup" :default-value="1">
  3.     <a-radio :value="1">
  4.       A
  5.     </a-radio>
  6.     <a-radio :value="2">
  7.       B
  8.     </a-radio>
  9.     <a-radio :value="3">
  10.       C
  11.     </a-radio>
  12.     <a-radio :value="4">
  13.       D
  14.     </a-radio>
  15.   </a-radio-group>
  16. </template>

Radio单选框 - 图5

大小

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

  1. <template>
  2.   <div>
  3.     <div>
  4.       <a-radio-group default-value="a" size="large">
  5.         <a-radio-button value="a">
  6.           Hangzhou
  7.         </a-radio-button>
  8.         <a-radio-button value="b">
  9.           Shanghai
  10.         </a-radio-button>
  11.         <a-radio-button value="c">
  12.           Beijing
  13.         </a-radio-button>
  14.         <a-radio-button value="d">
  15.           Chengdu
  16.         </a-radio-button>
  17.       </a-radio-group>
  18.     </div>
  19.     <div :style="{ marginTop: '16px' }">
  20.       <a-radio-group default-value="a">
  21.         <a-radio-button value="a">
  22.           Hangzhou
  23.         </a-radio-button>
  24.         <a-radio-button value="b">
  25.           Shanghai
  26.         </a-radio-button>
  27.         <a-radio-button value="c">
  28.           Beijing
  29.         </a-radio-button>
  30.         <a-radio-button value="d">
  31.           Chengdu
  32.         </a-radio-button>
  33.       </a-radio-group>
  34.     </div>
  35.     <div :style="{ marginTop: '16px' }">
  36.       <a-radio-group default-value="a" size="small">
  37.         <a-radio-button value="a">
  38.           Hangzhou
  39.         </a-radio-button>
  40.         <a-radio-button value="b">
  41.           Shanghai
  42.         </a-radio-button>
  43.         <a-radio-button value="c">
  44.           Beijing
  45.         </a-radio-button>
  46.         <a-radio-button value="d">
  47.           Chengdu
  48.         </a-radio-button>
  49.       </a-radio-group>
  50.     </div>
  51.   </div>
  52. </template>

Radio单选框 - 图6

不可用

Radio 不可用。

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

Radio单选框 - 图7

填底的按钮样式

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

  1. <template>
  2.   <div>
  3.     <div>
  4.       <a-radio-group default-value="a" button-style="solid">
  5.         <a-radio-button value="a">
  6.           Hangzhou
  7.         </a-radio-button>
  8.         <a-radio-button value="b">
  9.           Shanghai
  10.         </a-radio-button>
  11.         <a-radio-button value="c">
  12.           Beijing
  13.         </a-radio-button>
  14.         <a-radio-button value="d">
  15.           Chengdu
  16.         </a-radio-button>
  17.       </a-radio-group>
  18.     </div>
  19.     <div :style="{ marginTop: '16px' }">
  20.       <a-radio-group default-value="c" button-style="solid">
  21.         <a-radio-button value="a">
  22.           Hangzhou
  23.         </a-radio-button>
  24.         <a-radio-button value="b" disabled>
  25.           Shanghai
  26.         </a-radio-button>
  27.         <a-radio-button value="c">
  28.           Beijing
  29.         </a-radio-button>
  30.         <a-radio-button value="d">
  31.           Chengdu
  32.         </a-radio-button>
  33.       </a-radio-group>
  34.     </div>
  35.   </div>
  36. </template>

Radio单选框 - 图8

RadioGroup 组合 - 配置方式

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

  1. <template>
  2.   <div>
  3.     <a-radio-group :options="plainOptions" :default-value="value1" @change="onChange1" />
  4.     <br />
  5.     <a-radio-group v-model="value2" :options="options" @change="onChange2" />
  6.     <br />
  7.     <a-radio-group v-model="value3" :options="optionsWithDisabled" disabled @change="onChange3" />
  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单选框 - 图9

单选组合

一组互斥的 Radio 配合使用。

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

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()获取焦点