Radio 单选框

17:06

说明

单选框，用于从一组选项中单选。ux-radio-group 负责分组、用 v-model 绑定选中值，并统一控制 shape / size / active-color / disabled 等；ux-radio 是组内单个选项，用 name（或 value）标识，label 为显示文本。

兼容性

平台	支持情况
App	✅ 支持
H5	✅ 支持
微信小程序	✅ 支持

示例

基础用法

使用 v-model 绑定选中的值，同一组内只能选中一个。

查看源码

<template>
    <ux-radio-group v-model="value">
        <ux-radio label="荔枝" name="荔枝" />
        <ux-radio label="香蕉" name="香蕉" />
        <ux-radio label="橙子" name="橙子" />
    </ux-radio-group>
</template>

<script setup lang="uts">
const value = ref<string>('荔枝');
</script>

形状 shape

shape="circle" 为圆形，shape="square" 为方形（3px 小圆角）。

查看源码

<template>
    <ux-radio-group v-model="value" shape="square">
        <ux-radio label="荔枝" name="荔枝" />
        <ux-radio label="香蕉" name="香蕉" />
    </ux-radio-group>
</template>

<script setup lang="uts">
const value = ref<string>('荔枝');
</script>

尺寸配置 size

支持 small / default / large 预设值和自定义数值（单位px）；传数值时图标按 size 的 0.6、label 按 0.8 自适应。

查看源码

<template>
    <ux-radio-group v-model="value" size="large">
        <ux-radio label="荔枝" name="荔枝" />
        <ux-radio label="香蕉" name="香蕉" />
    </ux-radio-group>
</template>

<script setup lang="uts">
const value = ref<string>('荔枝');
</script>

激活颜色 active-color

通过 active-color 设置选中时的颜色，可覆盖 group 的颜色。

查看源码

<template>
    <ux-radio-group v-model="value" active-color="#19be6b">
        <ux-radio label="荔枝" name="荔枝" />
        <ux-radio label="香蕉" name="香蕉" />
    </ux-radio-group>
</template>

<script setup lang="uts">
const value = ref<string>('荔枝');
</script>

禁用 disabled

通过 disabled 禁用单个 radio，或通过 group 的 disabled 禁用全部。

查看源码

<template>
    <ux-radio-group v-model="value">
        <ux-radio label="荔枝" name="荔枝" :disabled="true" />
        <ux-radio label="香蕉" name="香蕉" />
    </ux-radio-group>
</template>

<script setup lang="uts">
const value = ref<string>('香蕉');
</script>

API

Props

ux-radio-group

属性	说明	类型	默认值	版本
customStyle	自定义根节点样式	string | UTSJSONObject	-	-
customClass	自定义根节点样式类	string	''	-
modelValue	绑定值，选中的 radio 的 name/value	string | number	''	-
disabled	是否禁用所有 radio	boolean	false	-
labelDisabled	是否禁止点击文本操作 radio	boolean	false	-
shape	形状	'circle' | 'square'	'circle'	-
activeColor	选中状态下的颜色	string	''	-
size	组件整体大小	string | number	''	-
iconSize	图标大小	string | number	''	-
width	每个 radio 宽度	string	'auto'	-
wrap	是否换行	boolean	false	-

ux-radio

属性	说明	类型	默认值	版本
customStyle	自定义根节点样式	string | UTSJSONObject	-	-
customClass	自定义根节点样式类	string	''	-
label	radio 的标签	string	''	-
name	radio 的标示符	string | number	''	-
value	radio 的值	string | number	''	-
shape	形状，circle为圆形，square为方形	'circle' | 'square'	-	-
disabled	是否禁用	boolean	-	-
labelDisabled	是否禁止点击文本操作 radio	boolean	-	-
activeColor	选中状态下的颜色，如设置此值，将会覆盖 radioGroup 的 activeColor 值	string	-	-
iconSize	图标大小，单位px	string | number	-	-
labelSize	label 的字体大小	string | number	''	-
size	组件的整体大小	string | number	-	-

Events

ux-radio-group

事件名	说明	回调参数	版本
change	任一个radio状态发生变化时触发，回调为选中的值	value: string | number	-

ux-radio

事件名	说明	回调参数	版本
change	某个radio状态发生变化时触发，回调为选中的值	value: string | number	-

Slots

ux-radio-group

插槽名	说明	版本
default	放置 ux-radio 子组件	-

ux-radio

插槽名	说明	版本
default	自定义 label 内容（默认显示 label 文本）	-

注意事项

• ux-radio 需放在 ux-radio-group 内才会被分组管理、参与选中联动；脱离 group 单独使用时不会与其它 radio 联动。
• 选中值由 group 的 v-model 维护，ux-radio 用 name（优先 value）匹配选中项，二者需与绑定值类型一致。
• ux-radio 的 disabled、label-disabled、size、icon-size、active-color 会覆盖 group 上的同名配置。
• ux-radio 的 size 能解析出尺寸档（含数值档）时，label-size 不生效，字号取该档内的值。
• label-disabled 为 true 时点击文本不触发选中，仅点击图标可切换。