# t-radio

Radio 单选框

t-radio 组件介绍

t-radio 单选支持多种样式模式（如基础、按钮、列表、标签），适用于表单或页面中的单选功能。它允许自定义样式、禁用状态。

t-radio 平台兼容

Harmony	H5	Android	iOS	小程序	UTS
✅	✅	✅	✅	✅	✅

t-radio 基础用法

基础用法参考 demo/radio/radio.uvue，通过 v-model 绑定选中值。

<template>
	<view class="p-15">
		<t-section title="主题-type-开启动画" class="mb-15"></t-section>
		<view :class="[`fl mb-15 fww tvg r-10`]">
			<t-radio :transition="true" icon-class="mr-10!" @click="radioclick" :checked="checked"
				@change="onchange">
				<template #label>
					<t-text-light class="c-#666 slh-50" :patternsValue="['用户隐私协议']">登录、注册代表您同意【用户隐私协议】</t-text-light>
				</template>
			</t-radio>
		</view>
		<t-section title="size-large" class="mb-15 fww"></t-section>
		<view :class="[`fl mb-15 fww tvg r-10`]">
			<t-radio :checked="true" type="primary" size="large">石榴</t-radio>
			<t-radio type="warning" size="large">橙子</t-radio>
			<t-radio type="error" size="large">香蕉</t-radio>
			<t-radio type="success" size="large">橙子</t-radio>
		</view>
		<t-section title="size-medium" class="mb-15 fww"></t-section>
		<view :class="[`fl mb-15 fww tvg r-10`]">
			<t-radio type="primary" size="medium">石榴</t-radio>
			<t-radio type="warning" size="medium">橙子</t-radio>
			<t-radio type="error" size="medium">香蕉</t-radio>
			<t-radio type="success" size="medium" :disabled="true">橙子</t-radio>
		</view>
		<t-section title="size-small" class="mb-15 fww"></t-section>
		<view :class="[`fl mb-15 fww tvg r-10`]">
			<t-radio type="primary" size="small">石榴</t-radio>
			<t-radio type="warning" size="small">橙子</t-radio>
			<t-radio type="error" size="small">香蕉</t-radio>
			<t-radio type="success" size="small">橙子</t-radio>
		</view>
		<t-section title="size-mini" class="mb-15 fww"></t-section>
		<view :class="[`fl mb-15 fww tvg r-10`]">
			<t-radio type="primary" size="mini">石榴</t-radio>
			<t-radio type="warning" size="mini">橙子</t-radio>
			<t-radio type="error" size="mini">香蕉</t-radio>
			<t-radio type="success" size="mini">橙子</t-radio>
		</view>
		<view :class="[`fl mb-15 fww tvg r-10`]">
			<t-section title="自定义图标 自定义样式 " class="mb-15"></t-section>
			<t-radio type="primary" :transition="true" label-class="c-#666">梨子</t-radio>
			<t-radio type="warning" :transition="true" active-class="bg-blue" active-label-class="c-red s-10"
				inactive-label-class="c-blue s-15">梨子</t-radio>
		</view>
		<t-section title="动态增删" class="mb-15"></t-section>
		<view :class="[`fl mb-15 fww tvg r-10`]">
			<t-radio v-for="(item,index) in list" :key="index" type="primary" size="large"
				:transition="true">{{item.label}}</t-radio>
		</view>
		<view class="fl">
			<t-button size="mini" class="mr-10" type="primary" @click="add">增加</t-button>
			<t-button size="mini" type="error" @click="del">删除</t-button>
		</view>
		<t-section title="按钮模式" class="mtb-15"></t-section>
		<view :class="[`fl mb-15 fww tvg r-10`]">
			<t-radio class="mrb-5" size="large" active-class="bg-#fff" inactive-class="bg-#000"
				active-label-class="c-#000" inactive-label-class="c-#fff" type="primary" mode="button">石榴</t-radio>
			<t-radio class="mrb-5" size="medium" type="warning" mode="button" effect="light">橙子</t-radio>
			<t-radio class="mrb-5" size="small" type="error" mode="button" effect="dark">香蕉</t-radio>
			<t-radio class="mrb-5" size="mini" type="success" mode="button">橙子</t-radio>
			<t-radio class="mrb-5" size="mini" type="warning" mode="button">梨子</t-radio>
		</view>
		<view :class="[`mb-15 fww tvg r-10`]">
			<t-radio class="mb-5" type="primary" mode="button" size="large">石榴</t-radio>
			<t-radio class="mb-5" type="warning" mode="button" size="medium">橙子</t-radio>
			<t-radio class="mb-5" type="success" mode="button" size="small">香蕉</t-radio>
			<t-radio class="mb-5" type="error" mode="button" size="mini">橙子</t-radio>
			<t-radio class="mb-5" type="info" mode="button" size="mini">梨子</t-radio>
		</view>
		<t-section title="列表模式" class="mtb-15"></t-section>
		<view :class="[`tvg r-10`]">
			<t-radio size="large" type="primary" mode="cell" :transition="true">石榴</t-radio>
			<t-radio size="large" type="warning" icon="thumb-up" mode="cell" :transition="true">橙子</t-radio>
			<t-radio size="large" type="success" mode="cell">香蕉</t-radio>
			<t-radio size="large" type="error" mode="cell" :transition="true">橙子</t-radio>
			<t-radio size="large" type="warning" mode="cell" :transition="true">梨子</t-radio>
		</view>
		<tui-theme-switch></tui-theme-switch>
	</view>
</template>


<script setup>
	import { TuiGuid } from '@/uni_modules/tui-common'
	type radiolisttype = {
		value : string
		label : string
	}
	const checked = ref<boolean>(true)
	const list = ref<radiolisttype[]>([
		{ value: '1', label: '石榴' },
		{ value: '2', label: '橙子' },
		{ value: '3', label: '香蕉' },
		{ value: '4', label: '橙子' },
		{ value: '5', label: '梨子' }
	])
	function add() {
		const a : radiolisttype = {
			value: TuiGuid(10),
			label: TuiGuid(10)
		}
		list.value.push(a)
	}
	function del() {
		list.value.splice(1, 1)
	}
	function onchange(e : boolean) {
		console.log(e)
	}
	function radioclick() {
		checked.value = !checked.value
	}
</script>

t-radio Props

属性名	说明	类型	默认值
path	点击组件后跳转的页面路径；为空时仅响应事件	string	''
hover	是否启用点击效果	boolean	true
type	组件主题类型，可选 info、primary、error、warning、success	string	''
disabled	是否禁用	boolean	false
effect	组件显示主题，可选 normal、dark、light、plain	string	'normal'
size	组件尺寸，可选 large、medium、small、mini	string	'medium'
transition	是否支持动画	boolean	false
border	是否显示边框	boolean	true
duration	动画时间（毫秒）	number	200
checked	选中状态	boolean	false
value	绑定的值	string	''
label	显示文本	string	''
labelClass	显示文本样式	string	''
patternsValue	配置文本内需要高亮显示的文字内容	string[]	[]
patternsReg	高亮显示匹配模式	any	-
patternsColor	高亮文本显示的颜色	string	'#ff0000'
icon	图标名称	string	'check-fill'
iconBoxClass	图标容器样式	string	''
activeClass	选中时的组件样式	string	''
inactiveClass	未选中时的组件样式	string	''
iconClass	图标样式	string	''
activeIconClass	选中时图标的样式	string	''
inactiveIconClass	未选中时图标的样式	string	''
activeLabelClass	选中时文本的样式	string	''
inactiveLabelClass	未选中时文本的样式	string	''
mode	显示模式，可选 button（按钮样式）、radio（单选框模式）、cell（列表模式）	string	'radio'

t-radio Events

事件名	说明	回调参数
change	选中状态发生变化时触发	value: string
click	点击时触发	-
transitionend	动画结束时触发	-
initFinished	组件初始化完成时触发，返回组件节点信息	-
touchstart	触摸开始时触发	-
touchend	触摸结束时触发	-
touchmove	触摸移动时触发	-
touchcancel	触摸取消时触发	-

t-radio Slots

插槽名	说明
default	默认插槽，可自定义标签内容
label	标签文本插槽