T-UVUE-UI1.0.0

Appearance

RadioButtonGroup 单选框组 ​

支持平台 ​

安卓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>
		<t-card title="亮点" class="mb.30" title-class="c.red" sub-title="支持任意子组件参与布局" sub-title-class="c.red"></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" @change="test">
				<t-checkbox v-for="(item,index) in groups" :key="index" :value="item.id">{{item.id}}</t-checkbox>
			</t-checkbox-group>
			<t-button @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-checkbox-group class="mb.30-fl-tdb-tdr-tdp" v-model="radio" type="s" iconName="thumb-up-fill">
				<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" child-class="mr.20" type="s" 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-tdr" v-model="radio" type="p" 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" mode="tag" child-class="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==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>
		<template v-if="area==9">
			<t-section title="混合布局" class="mb.30"></t-section>
			<t-checkbox-group class="mb.30-fv-tpg-tdr-tdp" v-model="radio" type="p" childClass='mb.20' mode="tag">
				<t-section title="我喜欢的水果" class="mb.30"></t-section>
				<t-row>
					<t-checkbox class="mr.20" value="1">苹果</t-checkbox>
					<t-checkbox value="2">香蕉</t-checkbox>
				</t-row>
				<t-image class="w.100% tdr mb.30" src="/static/image/D1.jpg"></t-image>
				<t-section title="我讨厌的水果" class="mb.30"></t-section>
				<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-button type="w" class="mr.30-mb.30" size="small" @click="area=9">其它组件参与布局</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: {
			test(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绑定的值数组，用于存储当前选中的值String[][]-
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 ​

事件名描述回调参数版本
change单选框组值改变时触发(value: string[])=>void-

Slots ​

名称描述
--