Radio 单选框

代码演示

基础用法

Radio

<template>
  <a-radio v-model:checked="checked">Radio</a-radio>
</template>
<script setup>
import { ref } from 'vue';
const checked = ref(false);
</script>

不可用

Radio 不可用。

DisabledDisabled

<template>
  <div>
    <a-radio v-model:checked="checked1" :disabled="disabled">Disabled</a-radio>
    <a-radio v-model:checked="checked2" :disabled="disabled">Disabled</a-radio>
    <br />
    <div style="margin-top: 16px">
      <a-button type="primary" @click="toggleDisabled">Toggle disabled</a-button>
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue';
const disabled = ref(true);
const checked1 = ref(true);
const checked2 = ref(false);
const toggleDisabled = () => {
  disabled.value = !disabled.value;
};
</script>

按钮样式

按钮样式的单选组合。

HangzhouShanghaiBeijingChengdu

HangzhouShanghaiBeijingChengdu

HangzhouShanghaiBeijingChengdu

<template>
  <div>
    <div>
      <a-radio-group v-model:value="value1">
        <a-radio-button value="a">Hangzhou</a-radio-button>
        <a-radio-button value="b">Shanghai</a-radio-button>
        <a-radio-button value="c">Beijing</a-radio-button>
        <a-radio-button value="d">Chengdu</a-radio-button>
      </a-radio-group>
    </div>
    <div :style="{ marginTop: '16px' }">
      <a-radio-group v-model:value="value2">
        <a-radio-button value="a">Hangzhou</a-radio-button>
        <a-radio-button value="b" disabled>Shanghai</a-radio-button>
        <a-radio-button value="c">Beijing</a-radio-button>
        <a-radio-button value="d">Chengdu</a-radio-button>
      </a-radio-group>
    </div>
    <div :style="{ marginTop: '16px' }">
      <a-radio-group v-model:value="value3" disabled>
        <a-radio-button value="a">Hangzhou</a-radio-button>
        <a-radio-button value="b">Shanghai</a-radio-button>
        <a-radio-button value="c">Beijing</a-radio-button>
        <a-radio-button value="d">Chengdu</a-radio-button>
      </a-radio-group>
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue';
const value1 = ref('a');
const value2 = ref('a');
const value3 = ref('a');
</script>

填底的按钮样式

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

HangzhouShanghaiBeijingChengdu

HangzhouShanghaiBeijingChengdu

<template>
  <div>
    <div>
      <a-radio-group v-model:value="value1" button-style="solid">
        <a-radio-button value="a">Hangzhou</a-radio-button>
        <a-radio-button value="b">Shanghai</a-radio-button>
        <a-radio-button value="c">Beijing</a-radio-button>
        <a-radio-button value="d">Chengdu</a-radio-button>
      </a-radio-group>
    </div>
    <div :style="{ marginTop: '16px' }">
      <a-radio-group v-model:value="value2" button-style="solid">
        <a-radio-button value="a">Hangzhou</a-radio-button>
        <a-radio-button value="b" disabled>Shanghai</a-radio-button>
        <a-radio-button value="c">Beijing</a-radio-button>
        <a-radio-button value="d">Chengdu</a-radio-button>
      </a-radio-group>
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue';
const value1 = ref('a');
const value2 = ref('c');
</script>

RadioGroup 组合 - 配置方式

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

ApplePearOrange

ApplePearOrange

ApplePearOrange

ApplePearOrange

ApplePearOrange

ApplePearOrange

<template>
  <a-space direction="vertical">
    <a-radio-group v-model:value="value1" :options="plainOptions" />
    <a-radio-group v-model:value="value2" :options="optionsWithDisabled" />
    <a-radio-group v-model:value="value3" :options="plainOptions" disabled />
    <a-radio-group v-model:value="value1" option-type="button" :options="plainOptions" />
    <a-radio-group v-model:value="value2" option-type="button" :options="optionsWithDisabled" />
    <a-radio-group v-model:value="value3" option-type="button" :options="plainOptions" disabled />
  </a-space>
</template>
<script setup>
import { ref } from 'vue';
const plainOptions = ['Apple', 'Pear', 'Orange'];
const optionsWithDisabled = [
  {
    label: 'Apple',
    value: 'Apple',
  },
  {
    label: 'Pear',
    value: 'Pear',
  },
  {
    label: 'Orange',
    value: 'Orange',
    disabled: true,
  },
];
const value1 = ref('Apple');
const value2 = ref('Apple');
const value3 = ref('Apple');
</script>

单选组合 - 配合 name 使用

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

ABCD

<template>
  <a-radio-group v-model:value="value" name="radioGroup">
    <a-radio value="1">A</a-radio>
    <a-radio value="2">B</a-radio>
    <a-radio value="3">C</a-radio>
    <a-radio value="4">D</a-radio>
  </a-radio-group>
</template>
<script setup>
import { ref } from 'vue';
const value = ref('1');
</script>

API

Radio/Radio.Button

参数	说明	类型	默认值
autofocus	自动获取焦点	boolean	false
checked(v-model)	指定当前是否选中	boolean	false
disabled	禁用 Radio	boolean	false
value	根据 value 进行比较，判断是否选中	any	-

RadioGroup

单选框组合，用于包裹一组 Radio。

参数	说明	类型	默认值
buttonStyle	RadioButton 的风格样式，目前有描边和填色两种风格	outline | solid	outline
disabled	禁选所有子单选器	boolean	false
name	RadioGroup 下所有 input[type="radio"] 的 name 属性	string	-
options	以配置形式设置子元素	string[] | number[] | Array<{ label: string value: string disabled?: boolean }>	-
optionType	用于设置 Radio options 类型	default | button	default
size	大小，只对按钮样式生效	large | default | small	default
value(v-model)	用于设置当前选中的值	any	-

RadioGroup 事件

事件名称	说明	回调参数
change	选项变化时的回调函数	Function(e:Event)

方法

Radio

名称	描述
blur()	移除焦点
focus()	获取焦点