# t-checkbox-group

CheckboxGroup 多选框组

t-checkbox-group 组件介绍

t-checkbox-group 是一个复选框组组件，用于管理多个 t-checkbox 组件的选择状态，支持布局方向（横向或纵向）和不同的显示模式（checkbox、button、cell）。组件提供了统一的样式配置和事件处理，适用于需要多选功能的表单场景。

t-checkbox-group 平台兼容

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

t-checkbox-group 基础用法

基础用法参考 demo/checkbox-group/checkbox-group.uvue，通过 v-model 绑定选中值，在插槽中放置 t-checkbox 组件。

<template>
	<view class="p-15">
		<tui-theme-switch></tui-theme-switch>
		<t-card title="RadioGroup 多选框组"
				class="mb-15"
				sub-title="支持布局方向（横向或纵向）。不同的显示模式(radio、button、cell)丰富主题配置"></t-card>
		<t-card title="亮点"
				class="mb-15"
				title-class="c-red"
				sub-title="支持任意子组件参与布局,支持父组件统一设置子组件属性,让代码更简洁【父组件拥有子组件所有属性,子组件和父组件同时设置相同属性,子组件属性优先级高于父组件】"
				sub-title-class="c-red"></t-card>
		<t-checkbox-group :class="[`tvg ${radio_mode=='cell'?'fv':'fl'} r-10 fww p-10 mb-15`]"
						  :size="radio_size"
						  v-model="radio"
						  :type="radio_type"
						  :mode="radio_mode"
						  @change="checkboxchange"
						  child-class="mrb-15"
						  :transition="false">
			<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"
						:border="false">梨子</t-checkbox>
		</t-checkbox-group>
		<t-button class="mb-15"
				  type="primary"
				  @click="test">赋值{{radio_size}}</t-button>
		<t-group title="显示类型："
				 class="mb-15">
			<t-radio-group class="f fl fww r-10"
						   v-model="radio_mode"
						   type="primary">
				<t-radio value="checkbox">checkbox</t-radio>
				<t-radio value="button">button</t-radio>
				<t-radio value="cell">cell</t-radio>
			</t-radio-group>
		</t-group>
		<view :class="[`fl trm faic p-10 mb-15 tvg`]">
			<t-text class="mr-5">主题：</t-text>
			<t-radio-group class="f fl fww r-10"
						   v-model="radio_type"
						   type="primary">
				<t-radio value="">默认</t-radio>
				<t-radio value="primary">主要</t-radio>
				<t-radio value="success">成功</t-radio>
				<t-radio value="info">信息</t-radio>
				<t-radio value="warning">警告</t-radio>
				<t-radio value="error">危险</t-radio>
			</t-radio-group>
		</view>
		<view :class="[`tvg trm fl faic p-10 mb-15`]">
			<t-text class="mr-5">尺寸：</t-text>
			<t-radio-group :class="[`f fl fww r-10`]"
						   v-model="radio_size"
						   type="primary">
				<t-radio value="large">large</t-radio>
				<t-radio value="medium">medium</t-radio>
				<t-radio value="small">small</t-radio>
				<t-radio value="mini">mini</t-radio>
			</t-radio-group>
		</view>
	</view>
</template>

<script setup>
	const radio = ref<string[]>(['1', '99'])
	const radio_type = ref<string>('success')
	const radio_mode = ref<string>('checkbox')
	const radio_size = ref<string>('medium')

	const type = ref<string>('success')
	function test() {
		//赋值方式更新
		radio.value = ['1', '99', '2']
		//实际应用push请先判断是否存在，内部没做处理
		//radio.value.push('2')
	}
	function checkboxchange(values : string[]) {
		console.log(values)
	}
</script>

t-checkbox-group Props

属性名	说明	类型	默认值
path	点击组件后跳转的页面路径；为空时仅响应事件	string	''
hover	是否启用点击效果	boolean	false
type	组件主题类型，可选 info、primary、error、warning、success	string	'primary'
disabled	是否禁用	boolean	false
effect	组件显示主题，可选 normal、dark、light、plain	string	'normal'
size	组件尺寸，可选 large、medium、small、mini	string	'medium'
modelValue	绑定的选中值	string[]	[]
childClass	统一设置子元素的样式	string	''
transition	统一设置子元素选择时是否开启动画	boolean	false
duration	统一设置动画时间	number	200
labelClass	统一设置子组件标签样式	string	''
icon	统一设置选中状态的图标	string	'check-fill'
iconBoxClass	统一设置子组件图标的盒子的样式	string	''
activeClass	统一设置子组件被选中时的样式	string	''
inactiveClass	统一设置子组件未选中时的样式	string	''
iconClass	统一设置图标样式	string	''
activeIconClass	统一设置选中时图标的样式	string	''
inactiveIconClass	统一设置子组件图标未选中时的样式	string	''
activeLabelClass	统一设置子组件标签选中时的样式	string	''
inactiveLabelClass	统一设置子组件未选中时标签的样式	string	''
mode	统一设置子组件的显示模式，可选 checkbox、button、cell	string	'checkbox'
border	是否显示边框	boolean	true

t-checkbox-group Events

事件名	说明	回调参数
change	选中内容发生变化时触发	string[]
update:modelValue	绑定值变化时触发	string[]
click	点击时触发	UniPointerEvent
initFinished	组件初始化完成时触发，返回组件节点信息	NodeInfo
touchstart	触摸开始时触发	-
touchend	触摸结束时触发	-
touchmove	触摸移动时触发	-
touchcancel	触摸取消时触发	-
transitionend	动画结束时触发	-

t-checkbox-group Slots

插槽名	说明
default	默认插槽，用于放置 t-checkbox 组件