RadioButtonGroup 单选框组

支持平台

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

示例

<template>
	<t-page title="多选框组" class="p.30">
		<t-card title="RadioGroup 多选框组" class="mb.30"
			sub-title="支持布局方向（横向或纵向）。不同的显示模式(radio、button、cell和tags)丰富主题配置"></t-card>
		<template v-if="area==1">
			<t-section title="默认" class="mb.30"></t-section>
			<t-checkbox-group class="mb.30-fl-tdb-tdr-tdp" v-model="radio" type="p" childClass='mr.20'>
				<t-checkbox value="1">苹果</t-checkbox>
				<t-checkbox value="2">香蕉</t-checkbox>
				<t-checkbox value="3">橙子</t-checkbox>
				<t-checkbox value="4">石榴</t-checkbox>
				<t-checkbox value="99">梨子</t-checkbox>
			</t-checkbox-group>
		</template>
		<template v-if="area==2">
			<t-section title="设置图标" class="mb.30"></t-section>
			<t-checkbox-group class="mb.30-fl-tdb-tdr-tdp" v-model="radio" type="s" iconName="thumb-up-fill"
				childClass='mr.20'>
				<t-checkbox value="1">苹果</t-checkbox>
				<t-checkbox value="2">香蕉</t-checkbox>
				<t-checkbox value="3">橙子</t-checkbox>
				<t-checkbox value="4">石榴</t-checkbox>
				<t-checkbox value="99">梨子</t-checkbox>
			</t-checkbox-group>
		</template>
		<template v-if="area==3">
			<t-section title="按钮模式-水平" class="mb.30"></t-section>
			<t-checkbox-group class="mb.30-fl-tdb-tdr-tdp" v-model="radio" type="s" childClass='mr.20' mode="button">
				<t-checkbox value="1">苹果</t-checkbox>
				<t-checkbox value="2">香蕉</t-checkbox>
				<t-checkbox value="3">橙子</t-checkbox>
				<t-checkbox value="4">石榴</t-checkbox>
				<t-checkbox value="99">梨子</t-checkbox>
			</t-checkbox-group>
		</template>
		<template v-if="area==4">
			<t-section title="按钮模式-纵向" class="mb.30"></t-section>
			<t-checkbox-group class="mb.30-fv-tdb-tdr-tdp" v-model="radio" type="p" childClass='mb.20' mode="button">
				<t-checkbox value="1">苹果</t-checkbox>
				<t-checkbox value="2">香蕉</t-checkbox>
				<t-checkbox value="3">橙子</t-checkbox>
				<t-checkbox value="4">石榴</t-checkbox>
				<t-checkbox value="99">梨子</t-checkbox>
			</t-checkbox-group>
		</template>
		<template v-if="area==6">
			<t-section title="按钮模式-纵向" class="mb.30"></t-section>
			<t-checkbox-group class="mb.30-fv-tdb-tdr-tdp" v-model="radio" type="p" childClass='mb.20' mode="cell">
				<t-checkbox value="1">苹果</t-checkbox>
				<t-checkbox value="2">香蕉</t-checkbox>
				<t-checkbox value="3">橙子</t-checkbox>
				<t-checkbox value="4">石榴</t-checkbox>
				<t-checkbox value="99">梨子</t-checkbox>
			</t-checkbox-group>
		</template>
		<template v-if="area==7">
			<t-section title="标签模式-水平" class="mb.30"></t-section>
			<t-checkbox-group class="mb.30-fl-tdb-tdr-tdp" v-model="radio" type="s" childClass='mr.20' mode="tag">
				<t-checkbox value="1">苹果</t-checkbox>
				<t-checkbox value="2">香蕉</t-checkbox>
				<t-checkbox value="3">橙子</t-checkbox>
				<t-checkbox value="4">石榴</t-checkbox>
				<t-checkbox value="99">梨子</t-checkbox>
			</t-checkbox-group>
		</template>
		<template v-if="area==8">
			<t-section title="标签模式-纵向" class="mb.30"></t-section>
			<t-checkbox-group class="mb.30-fv-tdb-tdr-tdp" v-model="radio" type="p" childClass='mb.20' mode="tag">
				<t-checkbox value="1">苹果</t-checkbox>
				<t-checkbox value="2">香蕉</t-checkbox>
				<t-checkbox value="3">橙子</t-checkbox>
				<t-checkbox value="4">石榴</t-checkbox>
				<t-checkbox value="99">梨子</t-checkbox>
			</t-checkbox-group>
		</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-button type="e" class="mr.30-mb.30" size="small" @click="area=6">列表模式-纵向</t-button>
			<t-button type="s" class="mr.30-mb.30" size="small" @click="area=7">标签模式-水平</t-button>
			<t-button type="w" class="mr.30-mb.30" size="small" @click="area=8">标签模式-纵向</t-button>
		</t-row>
	</t-page>
</template>

<script>
	export default {
		data() {
			return {
				area: 1,
				radio: ['2'],
			};
		}
	}
</script>

Props

名称	描述	类型	默认值	可选值
modelValue	绑定的值数组，用于存储当前选中的值	String[]	[]	-
activeColor	选中时的颜色	String	""	-
inactiveColor	未选中时的颜色	String	"#909399"	-
childClass	子元素的自定义类名	String	""	-
iconName	图标名称	String	''	-
type	组件类型，用于定义不同的场景	String	'p'	-
mode	单选框样式类型	String	'radio'	'radio', 'button', 'cell', 'tag'

Events

事件名	描述	回调参数	版本
change	单选框组值改变时触发	(value: string[])	-
update:modelValue	绑定的值数组更新时触发	(value: string[])	-

Slots

名称	描述
-	-