单选框

单选框。

何时使用

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