UniApp 组件 · 实验

UGRadio 单选框

用于单项选择的单选框与单选框组。

组件预览

以下画面来自同一组件源码的 H5 构建，用于检查内容、状态和主题；MP-WEIXIN 最终外观仍以开发者工具和真机为准。

使用方式

配置 easycom 后直接使用 <ug-radio>，无需在页面脚本中导入组件。

vue

<script setup lang="ts">
import { ref } from 'vue'
const plan = ref('basic')
</script>
<template>
  <ug-space><ug-radio v-model="plan" value="basic" label="基础版" /><ug-radio v-model="plan" value="pro" label="专业版" /></ug-space>
</template>

easycom 公开入口：@ug666/ui-uniapp/components/ug-radio/ug-radio.vue

属性

属性	类型	默认值	说明
modelValue	string \| number \| boolean \| null	null	通过 v-model 共享当前选中值。
value	string \| number \| boolean	必填	当前选项的业务值。
label	string	—	选项文字，也可使用默认插槽。
disabled	boolean	Provider	禁用选项。
size	'sm' \| 'md' \| 'lg'	Provider	通过缩放原生控件设置尺寸。
activeColor	string	Token primary	选中颜色。

事件

事件	参数	说明
update:modelValue	value	选择当前项后更新 v-model。
change	value	返回当前项的原始业务值。

注意事项

多个 Radio 通过同一个 v-model 协调，不在组件内部维护业务选项数组。
原生 value 使用字符串，组件事件仍返回传入的原始业务值。

平台边界

总览中的画面来自同一组件源码的 H5 构建，只用于辅助浏览；小程序真实外观仍以 Demo 在微信开发者工具和真机中的结果为准。

MP-WEIXIN 已编译开发者工具与真机待验证