Radio 单选

用于在一组选项中选择一个值，提供单个 <mc-radio> 与选项组 <mc-radio-group>。

单选组

生存创造冒险旁观

mode = survival

<script setup lang="ts">
import { ref } from 'vue'
const mode = ref('survival')
</script>

<template>
  <mc-radio-group
    v-model="mode"
    :options="[
      { label: '生存', value: 'survival' },
      { label: '创造', value: 'creative' }
    ]"
  />
</template>

垂直排列

和平简单普通困难

<script setup lang="ts">
import { ref } from 'vue'
const difficulty = ref('normal')
</script>

<template>
  <mc-radio-group
    v-model="difficulty"
    direction="vertical"
    :options="[
      { label: '和平', value: 'peaceful' },
      { label: '简单', value: 'easy' },
      { label: '普通', value: 'normal' },
      { label: '困难', value: 'hard' }
    ]"
  />
</template>

单个 Radio

生存创造

<script setup lang="ts">
import { ref } from 'vue'
const mode = ref('survival')
</script>

<template>
  <mc-radio v-model="mode" value="survival">生存</mc-radio>
  <mc-radio v-model="mode" value="creative">创造</mc-radio>
</template>

mc-radio Props

名称	类型	默认	说明
modelValue	string | number | boolean	''	当前选中值（v-model）
value	string | number | boolean	''	当前单选项值
disabled	boolean	false	是否禁用

mc-radio-group Props

名称	类型	默认	说明
modelValue	string | number | boolean	''	当前选中值（v-model）
options	McRadioOption[]	[]	选项列表
direction	'horizontal' | 'vertical'	horizontal	排列方向
disabled	boolean	false	是否整组禁用

Events

事件	参数	说明
update:modelValue	string | number | boolean	v-model 更新
change	string | number | boolean	值变化