RadioGroup 单选组

MoRadioGroup 用于在一组选项中选择一个值。适合状态切换、模式选择和互斥配置项，支持尺寸、禁用、图标、自定义标签和颜色。

基础用法

Light

当前值：publish

Dark

当前值：publish

<script setup lang="ts">
import { ref } from "vue";

const action = ref("publish");
const options = [
  { label: "发布", value: "publish" },
  { label: "收藏", value: "favorite" },
  { label: "分享", value: "share" }
];
</script>

<template>
  <MoRadioGroup v-model="action" :options="options" />
</template>

尺寸

Light

Dark

<MoRadioGroup v-model="value" size="small" :options="options" />
<MoRadioGroup v-model="value" :options="options" />
<MoRadioGroup v-model="value" size="large" :options="options" />

禁用状态

Light

Dark

<MoRadioGroup v-model="value" :options="options" />
<MoRadioGroup v-model="value" disabled :options="options" />

图标和自定义标签

Light

Dark

<MoRadioGroup v-model="value" :options="options">
  <template #label="{ option, checked }">
    <span>{{ option.label }} - {{ checked ? "已选" : "可选" }}</span>
  </template>
</MoRadioGroup>

自定义颜色

Light

Dark

<MoRadioGroup
  v-model="value"
  :options="options"
  active-background-color="#0d9488"
  active-text-color="#0f766e"
/>

Change 事件

Light

尚未切换

Dark

尚未切换

<MoRadioGroup v-model="value" :options="options" @change="handleChange" />

API

属性	说明	类型	默认值
v-model	当前选中值	string | number | boolean	undefined
options	选项列表	RadioGroupOption[]	[]
theme	主题	light | dark	dark
size	尺寸	small | default | large	default
backgroundColor	组背景色	string	-
activeBackgroundColor	选中圆点和边框色	string	-
textColor	默认文字色	string	-
activeTextColor	选中文字色	string	-
disabled	是否整体禁用	boolean	false

RadioGroupOption

字段	说明	类型
label	选项文本	string
value	选项值	string | number | boolean
disabled	是否禁用	boolean
icon	图标文本	string

Events

事件	说明	回调参数
change	选中值变化时触发	value, option
update:modelValue	选中值变化时触发	value

Slots

插槽	说明
icon	自定义选项图标，参数 { option, index, checked, active }
label	自定义选项文本，参数 { option, index, checked, active }