# t-checkbox-state

CheckboxState 多选状态

t-checkbox-state 组件介绍

t-checkbox-state 是复选状态组件，与 t-checkbox 的区别在于：t-checkbox 只支持选中和未选中两种状态，而 t-checkbox-state 支持选中、未选中和半选三种状态。常用于树形结构、全选等场景。

t-checkbox-state 平台兼容

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

t-checkbox-state 基础用法

基础用法参考 demo/checkbox/checkbox.uvue，通过 state 属性控制选中状态。

<template>
	<view class="p-15">
		<t-card title="CheckboxState 半选中状态复选框"
				sub-title="配合复选框组件使用"
				class="mb-15"></t-card>
		<view :class="[`tvg trm tpm`]">
			<t-checkbox-state :state="state"
							  @select="select">全部</t-checkbox-state>
			<t-checkbox-group v-model="val"
							  :class="[`fl fww`]">
				<t-checkbox value="0">未选中</t-checkbox>
				<t-checkbox value="1">选中</t-checkbox>
				<t-checkbox value="2">半选</t-checkbox>
			</t-checkbox-group>
		</view>
	</view>
</template>

<script setup>
	const val = ref<string[]>([])
	function select(e : boolean) {
		val.value = e ? ['0', '1', '2'] : []
	}
	const state = computed(() : number => {
		let s : number = 0
		if (val.value.length == 0) {
			s = 0
		} else if (val.value.length == 3) {
			s = 1
		} else {
			s = 2
		}
		return s
	})
</script>

三种状态

<template>
  <t-checkbox-state :state="0">未选中</t-checkbox-state>
  <t-checkbox-state :state="1">选中</t-checkbox-state>
  <t-checkbox-state :state="2">半选</t-checkbox-state>
</template>

t-checkbox-state Props

属性名	说明	类型	默认值
state	组件状态，0 未选中、1 选中、2 半选	number	0
iconBoxClass	选择框盒子样式	string	''
size	组件尺寸	string	''
type	组件类型	string	''
disabled	是否禁用	boolean	false
hover	是否有点击效果	boolean	false
effect	组件显示主题	string	''

t-checkbox-state Events

事件名	说明	回调参数
change	状态变化时触发	(checked: boolean) => void
select	用户操作点击时触发	(checked: boolean) => void

t-checkbox-state Slots

插槽名	说明
default	复选框标签内容