Radio 单选框

Radio 单选框组件用于在一组选项中进行单一选择。支持自定义图标、样式穿透配置，以及灵活的事件处理。

参数

参数	说明	类型	可选值	默认值
pt	样式穿透配置	PassThrough	-	-
modelValue	绑定值（双向绑定）	string | number | boolean	-	-
activeIcon	选中状态的图标名称	string	-	"checkbox-circle-line"
inactiveIcon	未选中状态的图标名称	string	-	"checkbox-blank-circle-line"
showIcon	是否显示状态图标	boolean	-	true
label	单选框的标签文本	string	-	-
value	该单选框对应的唯一值	string | number | boolean	-	-
disabled	是否禁用该单选框	boolean	-	false

事件

事件名称	说明	回调参数
change	选中状态变化时触发的事件	(value: string | number | boolean)

PassThrough

样式穿透配置对象，用于深度自定义组件内部元素的样式。

参数	说明	类型
className	组件根元素样式	string
icon	图标元素配置	ClIconProps
label	标签文本元素配置	ClTextProps

使用示例

基础用法

最基本的单选框使用方式，通过 v-model 实现双向数据绑定。

<template>
	<cl-radio v-model="selected" value="vue">Vue.js</cl-radio>
	<cl-radio v-model="selected" value="react">React</cl-radio>
	<cl-radio v-model="selected" value="angular">Angular</cl-radio>
	<cl-radio v-model="selected" value="svelte">Svelte</cl-radio>
</template>

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

	// 当前选中的框架
	const selected = ref("vue");
</script>

禁用状态

使用 disabled 属性可以禁用特定的单选框选项。

<template>
	<cl-radio v-model="selected" value="available">可用选项</cl-radio>
	<cl-radio v-model="selected" value="disabled" disabled>禁用选项</cl-radio>
	<cl-radio v-model="selected" value="normal">普通选项</cl-radio>
</template>

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

	const selected = ref("available");
</script>

纯文本样式

通过设置 :show-icon="false" 隐藏图标，创建纯文本风格的单选框。

<template>
	<cl-radio v-model="selected" value="option1" :show-icon="false"> 纯文本选项一 </cl-radio>
	<cl-radio v-model="selected" value="option2" :show-icon="false"> 纯文本选项二 </cl-radio>
</template>

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

	const selected = ref("option1");
</script>

自定义图标

使用 active-icon 和 inactive-icon 属性自定义选中和未选中状态的图标。

<template>
	<cl-radio v-model="selected" value="liked" active-icon="heart-fill" inactive-icon="heart-line">
		我喜欢的
	</cl-radio>
	<cl-radio v-model="selected" value="starred" active-icon="star-fill" inactive-icon="star-line">
		我收藏的
	</cl-radio>
</template>

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

	const selected = ref("liked");
</script>

动态渲染选项

通过循环渲染创建动态的单选框组，注意需要为选项数组指定正确的 TypeScript 类型。

<template>
	<cl-radio v-for="(item, index) in options" :key="index" v-model="selected" :value="item.value">
		{{ item.label }}
	</cl-radio>
</template>

<script lang="ts" setup>
	import { ref } from "vue";
	import { type ClRadioOption } from "@/uni_modules/cool-ui";

	// 定义选项数据类型
	const options = ref<ClRadioOption[]>([
		{ label: "Vue.js", value: "vue" },
		{ label: "React", value: "react" },
		{ label: "Angular", value: "angular" },
		{ label: "Svelte", value: "svelte" }
	]);

	// 当前选中的技术栈
	const selected = ref("vue");
</script>