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