Radio 单选框

单选控件，支持单独使用或以 Group 批量管理。

基础用法

同意

当前：未选中

基础单选框，绑定 v-model

vue

<template>
  <div>
    <ARadio v-model="checked">同意</ARadio>
    <p style="margin-top: 8px; font-size: 13px; color: #888">当前：{{ checked ? '已选中' : '未选中' }}</p>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ARadio } from '@lite-code/aui-vue'

const checked = ref(false)
</script>

禁用状态

禁用未选中禁用已选中

禁用未选中与禁用已选中

vue

<template>
  <div style="display: flex; gap: 12px">
    <ARadio disabled>禁用未选中</ARadio>
    <ARadio :model-value="true" disabled>禁用已选中</ARadio>
  </div>
</template>

<script setup lang="ts">
import { ARadio } from '@lite-code/aui-vue'
</script>

单选框组

通过 ARadioGroup 实现互斥单选，options 配置选项列表。

苹果香蕉橙子葡萄

已选：无

单选框组，v-model 绑定当前选中值

vue

<template>
  <div>
    <ARadioGroup v-model="value" :options="options" />
    <p style="margin-top: 8px; font-size: 13px; color: #888">
      已选：{{ value || "无" }}
    </p>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { ARadioGroup } from "@lite-code/aui-vue";

const value = ref<string | number>("");
const options = [
  { label: "苹果", value: "apple" },
  { label: "香蕉", value: "banana" },
  { label: "橙子", value: "orange" },
  { label: "葡萄", value: "grape", disabled: true },
];
</script>

API

ARadio Props

属性	类型	默认值	说明
modelValue	boolean	—	受控选中状态
defaultChecked	boolean	false	非受控初始选中状态
size	'sm' | 'md' | 'lg'	'md'	尺寸
disabled	boolean	false	禁用
value	string | number	—	在 Group 中的值标识

ARadio Events

事件名	回调参数	说明
update:modelValue	(checked: boolean)	选中状态变更
change	(checked: boolean)	选中状态变更

ARadioGroup Props

属性	类型	默认值	说明
modelValue	string | number	—	受控选中值
defaultValue	string | number	—	非受控初始值
options	RadioOption[]	[]	选项列表
disabled	boolean	—	整组禁用

RadioOption

属性	类型	说明
label	string	显示文字
value	string | number	值
disabled	boolean	是否禁用