Radio单选框 - 图1

Radio 单选框

单选框。

何时使用

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

代码演示

Radio

基本用法

最简单的用法。

  1. <template>
  2.   <a-radio v-model:checked="checked">Radio</a-radio>
  3. </template>
  4. <script lang="ts">
  5. import { defineComponent, ref } from 'vue';
  6. export default defineComponent({
  7.   setup() {
  8.     const checked = ref<boolean>(false);
  9.     return {
  10.       checked,
  11.     };
  12.   },
  13. });
  14. </script>

Radio单选框 - 图2

按钮样式

按钮样式的单选组合。

  1. <template>
  2.   <div>
  3.     <div>
  4.       <a-radio-group v-model:value="value1">
  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 v-model:value="value2">
  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 v-model:value="value3">
  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 lang="ts">
  30. import { defineComponent, ref } from 'vue';
  31. export default defineComponent({
  32.   setup() {
  33.     const value1 = ref<string>('a');
  34.     const value2 = ref<string>('a');
  35.     const value3 = ref<string>('a');
  37.     return {
  38.       value1,
  39.       value2,
  40.       value3,
  41.     };
  42.   },
  43. });
  44. </script>

Radio单选框 - 图3

RadioGroup 垂直

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

  1. <template>
  2.   <a-radio-group v-model:value="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: 100px; margin-left: 10px" />
  9.     </a-radio>
  10.   </a-radio-group>
  11. </template>
  12. <script lang="ts">
  13. import { defineComponent, reactive, ref } from 'vue';
  14. export default defineComponent({
  15.   setup() {
  16.     const value = ref<number>(1);
  17.     const radioStyle = reactive({
  18.       display: 'block',
  19.       height: '30px',
  20.       lineHeight: '30px',
  21.     });
  23.     return {
  24.       value,
  25.       radioStyle,
  26.     };
  27.   },
  28. });
  29. </script>

Radio单选框 - 图4

单选组合 - 配合 name 使用

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

  1. <template>
  2.   <a-radio-group name="radioGroup" v-model:value="value">
  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>
  9. <script lang="ts">
  10. import { defineComponent, ref } from 'vue';
  11. export default defineComponent({
  12.   setup() {
  13.     const value = ref<string>('1');
  14.     return {
  15.       value,
  16.     };
  17.   },
  18. });
  19. </script>

Radio单选框 - 图5

大小

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

  1. <template>
  2.   <div>
  3.     <div>
  4.       <a-radio-group v-model:value="value1" 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 v-model:value="value2">
  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 v-model:value="value3" 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>
  29. <script lang="ts">
  30. import { defineComponent, ref } from 'vue';
  31. export default defineComponent({
  32.   setup() {
  33.     const value1 = ref<string>('a');
  34.     const value2 = ref<string>('a');
  35.     const value3 = ref<string>('a');
  36.     return {
  37.       value1,
  38.       value2,
  39.       value3,
  40.     };
  41.   },
  42. });
  43. </script>

Radio单选框 - 图6

不可用

Radio 不可用。

  1. <template>
  2.   <div>
  3.     <a-radio v-model:checked="checked1" :disabled="disabled">Disabled</a-radio>
  4.     <br />
  5.     <a-radio v-model:checked="checked2" :disabled="disabled">Disabled</a-radio>
  6.     <div :style="{ marginTop: 20 }">
  7.       <a-button type="primary" @click="toggleDisabled">Toggle disabled</a-button>
  8.     </div>
  9.   </div>
  10. </template>
  11. <script lang="ts">
  12. import { defineComponent, ref } from 'vue';
  13. export default defineComponent({
  14.   setup() {
  15.     const disabled = ref<boolean>(true);
  16.     const checked1 = ref<boolean>(false);
  17.     const checked2 = ref<boolean>(false);
  19.     const toggleDisabled = () => {
  20.       disabled.value = !disabled.value;
  21.     };
  23.     return {
  24.       disabled,
  25.       checked1,
  26.       checked2,
  27.       toggleDisabled,
  28.     };
  29.   },
  30. });
  31. </script>

Radio单选框 - 图7

填底的按钮样式

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

  1. <template>
  2.   <div>
  3.     <div>
  4.       <a-radio-group v-model:value="value1" button-style="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 v-model:value="value2" button-style="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>
  21. <script lang="ts">
  22. import { defineComponent, ref } from 'vue';
  23. export default defineComponent({
  24.   setup() {
  25.     const value1 = ref<string>('a');
  26.     const value2 = ref<string>('c');
  27.     return {
  28.       value1,
  29.       value2,
  30.     };
  31.   },
  32. });
  33. </script>

Radio单选框 - 图8

RadioGroup 组合 - 配置方式

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

  1. <template>
  2.   <div>
  3.     <a-radio-group :options="plainOptions" v-model:value="value1" />
  4.     <br />
  5.     <a-radio-group v-model:value="value2" :options="options" />
  6.     <br />
  7.     <a-radio-group v-model:value="value3" :options="optionsWithDisabled" disabled />
  8.   </div>
  9. </template>
  10. <script lang="ts">
  11. import { defineComponent, ref } from 'vue';
  12. const plainOptions = ['Apple', 'Pear', 'Orange'];
  13. const options = [
  14.   { label: 'Apple', value: 'Apple' },
  15.   { label: 'Pear', value: 'Pear' },
  16.   { label: 'Orange', value: 'Orange' },
  17. ];
  18. const optionsWithDisabled = [
  19.   { label: 'Apple', value: 'Apple' },
  20.   { label: 'Pear', value: 'Pear' },
  21.   { label: 'Orange', value: 'Orange', disabled: false },
  22. ];
  23. export default defineComponent({
  24.   data() {
  25.     const value1 = ref<string>('Apple');
  26.     const value2 = ref<string>('Apple');
  27.     const value3 = ref<string>('Apple');
  29.     return {
  30.       plainOptions,
  31.       options,
  32.       optionsWithDisabled,
  33.       value1,
  34.       value2,
  35.       value3,
  36.     };
  37.   },
  38. });
  39. </script>

Radio单选框 - 图9

单选组合

一组互斥的 Radio 配合使用。

  1. <template>
  2.   <div>
  3.     <a-radio-group v-model:value="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 lang="ts">
  12. import { defineComponent, ref } from 'vue';
  13. export default defineComponent({
  14.   setup() {
  15.     const value = ref<number>(1);
  16.     return {
  17.       value,
  18.     };
  19.   },
  20. });
  21. </script>

API

Radio

参数说明类型默认值
autofocus自动获取焦点booleanfalse
checked(v-model)指定当前是否选中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()获取焦点