ui-form-radio-group 单选框组组件

版本：v2.3.11

单选框组容器组件，用于包裹多个 ui-form-radio 子组件，统一管理选中值，支持表单验证联动

基本使用

<template>
  <view class="radio-group-demo">
    <ui-form-radio-group v-model="selectedValue">
      <ui-form-radio label="选项1" value="1" />
      <ui-form-radio label="选项2" value="2" />
      <ui-form-radio label="选项3" value="3" />
    </ui-form-radio-group>
    <text>选中值：{{ selectedValue }}</text>
  </view>
</template>

<script setup>
import { ref } from 'vue'

const selectedValue = ref('')
</script>

<style scoped>
.radio-group-demo {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
</style>

Props

参数	类型	默认值	说明
size	String	''	尺寸，可选值：''、mini、xs、sm、lg
modelValue	String/Object/Number/Boolean/Array	{}	绑定值（v-model）

Events

事件名	说明	回调参数
change	选中值变化时触发	(value) 当前选中的值

Slots

名称	说明
default	放置 ui-form-radio 子组件

示例

配合标签式单选框

<template>
  <view class="radio-group-tag-demo">
    <ui-form-radio-group v-model="selectedValue">
      <ui-form-radio-tag label="标签1" value="1" />
      <ui-form-radio-tag label="标签2" value="2" />
      <ui-form-radio-tag label="标签3" value="3" />
    </ui-form-radio-group>
    <text>选中值：{{ selectedValue }}</text>
  </view>
</template>

<script setup>
import { ref } from 'vue'

const selectedValue = ref('')
</script>

配合表单验证

<template>
  <view class="radio-group-form-demo">
    <ui-form :model="formData" :rules="rules">
      <ui-form-item label="性别" prop="gender">
        <ui-form-radio-group v-model="formData.gender">
          <ui-form-radio label="男" value="male" />
          <ui-form-radio label="女" value="female" />
        </ui-form-radio-group>
      </ui-form-item>
    </ui-form>
  </view>
</template>

<script setup>
import { ref } from 'vue'

const formData = ref({
  gender: ''
})

const rules = {
  gender: [{ required: true, message: '请选择性别' }]
}
</script>

平台兼容

平台	支持情况
H5	✅
微信小程序	✅
支付宝小程序	✅
百度小程序	✅
字节跳动小程序	✅
QQ小程序	✅
APP	✅

注意事项

1. 子组件需使用 ui-form-radio 或 ui-form-radio-tag，通过 provide/inject 机制通信
2. size 属性会自动传递给子组件
3. 组件挂载后会自动查找父级 ui-form 和 ui-form-item 组件以支持表单验证
4. 同一组内只能选中一个选项，选中新选项会自动取消之前的选中