T-UVUE-UI1.0.0

Appearance

RadioGroup 单选组 ​

支持平台 ​

安卓iosweb微信小程序支付宝小程序QQ小程序
√√√xxx

示例 ​

html
<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-text>{{radio}}</t-text>
			<t-radio-group class="mb.30-fl-tdb-tdr-tdp" v-model="radio" type="p" @change="onchange">
				<t-radio v-for="(item,index) in groups" :key="index" :value="item.id">{{item.id}}</t-radio>
			</t-radio-group>
			<t-button class="mb.30" @click="del(1)">删除第二项</t-button>
			<t-button @click="add">添加</t-button>
		</template>
		<template v-if="area==2">
			<t-section title="设置图标" class="mb.30"></t-section>
			<t-radio-group class="mb.30-fl-tdb-tdr-tdp" v-model="radio" type="s" iconName="thumb-up-fill">
				<t-radio value="1">苹果</t-radio>
				<t-radio value="2">香蕉</t-radio>
				<t-radio value="3">橙子</t-radio>
				<t-radio value="4">石榴</t-radio>
				<t-radio value="99">梨子</t-radio>
			</t-radio-group>
		</template>
		<template v-if="area==3">
			<t-section title="按钮模式-水平" class="mb.30"></t-section>
			<t-radio-group class="mb.30-fl-tdb-tdr-tdp" v-model="radio" type="s" childClass='mr.20' mode="button">
				<t-radio value="1">苹果</t-radio>
				<t-radio value="2">香蕉</t-radio>
				<t-radio value="3">橙子</t-radio>
				<t-radio value="4">石榴</t-radio>
				<t-radio value="99">梨子</t-radio>
			</t-radio-group>
		</template>
		<template v-if="area==4">
			<t-section title="按钮模式-纵向-123" class="mb.30"></t-section>
			<t-radio-group class="mb.30-fv-tdb-tdr-tdp" v-model="radio" type="p" childClass='mb.20' mode="button">
				<t-radio value="1">苹果</t-radio>
				<t-radio value="2">香蕉</t-radio>
				<t-radio value="3">橙子</t-radio>
				<t-radio value="4">石榴</t-radio>
				<t-radio value="99">梨子</t-radio>
			</t-radio-group>
		</template>
		<template v-if="area==6">
			<t-section title="列表模式-纵向" class="mb.30"></t-section>
			<t-radio-group class="mb.30-fv-tdb-tdr-tdp" v-model="radio" type="p" childClass='mb.20' mode="cell">
				<t-radio value="1">苹果</t-radio>
				<t-radio value="2">香蕉</t-radio>
				<t-radio value="3">橙子</t-radio>
				<t-radio value="4">石榴</t-radio>
				<t-radio value="99">梨子</t-radio>
			</t-radio-group>
		</template>
		<template v-if="area==7">
			<t-section title="标签模式-水平" class="mb.30"></t-section>
			<t-radio-group class="mb.30-fl-tdb-tdr-tdp" v-model="radio" type="s" childClass='mr.20' mode="tag">
				<t-radio value="1">苹果</t-radio>
				<t-radio value="2">香蕉</t-radio>
				<t-radio value="3">橙子</t-radio>
				<t-radio value="4">石榴</t-radio>
				<t-radio value="99">梨子</t-radio>
			</t-radio-group>
		</template>
		<template v-if="area==8">
			<t-section title="标签模式-纵向" class="mb.30"></t-section>
			<t-radio-group class="mb.30-fv-tdb-tdr-tdp" v-model="radio" type="p" childClass='mb.20' mode="tag">
				<t-radio value="1">苹果</t-radio>
				<t-radio value="2">香蕉</t-radio>
				<t-radio value="3">橙子</t-radio>
				<t-radio value="4">石榴</t-radio>
				<t-radio value="99">梨子</t-radio>
			</t-radio-group>
		</template>
		<t-row class="tdb-tdr-mb.30-tdp-ffww">
			<t-button type="sp" class="mr.30-mb.30" size="small" @click="radio='3'">赋值</t-button>
			<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>
	type typegroups = {
		id : string
		label : string
	}
	import { TuiGuid } from '@/uni_modules/tui-plus'
	export default {
		data() {
			return {
				area: 1,
				radio: '2',
				groups: [{
					id: '1',
					label: '苹果'
				}, {
					id: '2',
					label: '苹果1'
				}, {
					id: '3',
					label: '苹果2'
				}, {
					id: '4',
					label: '苹果3'
				}, {
					id: '5',
					label: '苹果5'
				}] as typegroups[]
			};
		},
		methods: {
			onchange(e : string) {
				console.log(e)
			},
			del(index : number) {
				this.groups.splice(1, 1)
			},
			add() {
				this.groups.push({
					id: TuiGuid(10),
					label: TuiGuid(10)
				})
			}
		}
	}
</script>

Props ​

名称描述类型默认值可选
modelValue绑定的值，支持v-modelString""
activeColor选中时的颜色String""
inactiveColor未选中时的颜色String"#909399"
childClass子元素的额外类名String""
iconName图标名称String''
type组件类型String'p'normal,info,primary,error,warning,success
mode单选样式String'radio'不同的显示模式(radio、button、cell和tags)

Events ​

名称描述
update:modelValue当绑定值更新时触发
change当选项改变时触发

Methods ​

名称描述
reset重置选中的值
getValue获取当前选中的值
init初始化子组件
seleced选择一个选项