Radio 单选

平台兼容性

安卓	ios	web	微信小程序	支付宝小程序	QQ小程序
√	√	√	x	x	x

示例

<template>
	<t-page class="p.30" title="单选">
		<t-card title="Radio 单选" class="mb.30" sub-title="表单或页面中实现单选功能，支持自定义样式、禁用状态、事件监听等特性，简化了表单操作，提高了用户体验。"></t-card>
		<template v-if="area==1">
			<t-section title="基础功能" class="mb.30"></t-section>
			<t-row class="tdb-tdr-mb.30-tdp-ffww">
				<t-radio class="mr.25" ref="radio1" value="4" @click="checked(1)" :checked="true"
					type="primary">石榴</t-radio>
				<t-radio class="mr.25" ref="radio2" @click="checked(2)" value="3" type="info">橙子</t-radio>
				<t-radio class="mr.25" ref="radio3" @click="checked(3)" value="2" type="success">香蕉</t-radio>
				<t-radio class="mr.25" ref="radio4" @click="checked(4)" value="3" type="error">橙子</t-radio>
				<t-radio class="mr.25" ref="radio5" @click="checked(5)" value="5" type="warning">梨子</t-radio>
			</t-row>
		</template>
		<template v-if="area==2">
			<t-section title="按钮模式" class="mb.30"></t-section>
			<t-row class="tdr-mb.30-tdp-ffww">
				<t-radio class="mr.25" ref="radio1" @click="checked(1)" value="4" :checked="true" mode="button"
					type="primary">石榴</t-radio>
				<t-radio class="mr.25" ref="radio2" @click="checked(2)" value="3" mode="button" type="info">橙子</t-radio>
				<t-radio class="mr.25" ref="radio3" @click="checked(3)" mode="button" value="2"
					type="success">香蕉</t-radio>
				<t-radio class="mr.25" ref="radio4" @click="checked(4)" value="3" mode="button"
					type="error">橙子</t-radio>
				<t-radio class="mr.25" ref="radio5" @click="checked(5)" value="5" mode="button"
					type="warning">梨子</t-radio>
			</t-row>
		</template>
		<template v-if="area==3">
			<t-section title="列表模式" class="mb.30"></t-section>
			<t-col class="tdr-mb.30">
				<t-radio class="mr.25" ref="radio1" @click="checked(1)" value="4" :checked="true" mode="cell"
					type="primary">石榴</t-radio>
				<t-radio class="mr.25" ref="radio2" @click="checked(2)" value="3" mode="cell" type="info">橙子</t-radio>
				<t-radio class="mr.25" ref="radio3" @click="checked(3)" mode="cell" value="2"
					type="success">香蕉</t-radio>
				<t-radio class="mr.25" ref="radio4" @click="checked(4)" value="3" mode="cell" type="error">橙子</t-radio>
				<t-radio class="mr.25" ref="radio5" @click="checked(5)" value="5" mode="cell"
					type="warning">梨子</t-radio>
			</t-col>
		</template>
		<template v-if="area==4">
			<t-section title="标签模式" class="mb.30"></t-section>
			<t-row class="tdr-mb.30-tdp-ffww">
				<t-radio class="mr.25-mb.30" ref="radio1" value="4" @click="checked(1)" mode="tag" type="primary"
					:checked="true" :disabled="true">石榴(禁用状态)</t-radio>
				<t-radio class="mr.25-mb.30" ref="radio2" value="3" @click="checked(2)" mode="tag" type="info">橙子</t-radio>
				<t-radio class="mr.25-mb.30" ref="radio3" mode="tag" @click="checked(3)" value="2" type="success">香蕉</t-radio>
				<t-radio class="mr.25-mb.30" ref="radio4" value="3" @click="checked(4)" mode="tag" type="error">橙子</t-radio>
				<t-radio class="mr.25-mb.30" ref="radio5" value="5" @click="checked(5)" mode="tag" type="warning">梨子</t-radio>
			</t-row>
		</template>
		<t-row class="tdb-tdr-mb.30-tdp-ffww">
			<t-button type="p" class="mr.30-mb.30" size="small" @click="area=1">基础功能</t-button>
			<t-button type="e" class="mr.30-mb.30" size="small" @click="area=2">按钮模式</t-button>
			<t-button type="s" class="mr.30-mb.30" size="small" @click="area=3">列表模式</t-button>
			<t-button type="w" class="mr.30-mb.30" size="small" @click="area=4">标签模式</t-button>
		</t-row>
	</t-page>
</template>

<script>
	export default {
		data() {
			return {
				area: 1
			};
		},
		methods: {
			checked(index : number) {
				for (let i = 1; i < 6; i++) {
					const ins = this.$refs['radio' + i] as TRadioComponentPublicInstance
					ins.setChecked(i == index)
				}
			}
		}
	}
</script>

Props

名称	描述	类型	默认值
type	组件场景	String	'info'
hover	是否有鼠标悬停效果	Boolean	true
value	绑定的值	String	-
iconName	图标名称	String	-
modelValue	绑定的值，支持v-model	String	-
activeColor	选中时的颜色	String	-
inactiveColor	未选中时的颜色	String	"#909399"
mode	单选样式	String	'radio'

Events

名称	描述
change	当选中状态改变时触发
click	当组件被点击时触发

Methods

名称	描述
setChecked	设置选中状态
wrapper	点击事件包装器