t-checkbox-state

CheckboxState 多选状态

组件介绍

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

平台兼容

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

基础用法

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

<template>
  <t-checkbox-state :state="checkState" @change="onChange">
    全选
  </t-checkbox-state>
</template>

<script setup>
const checkState = ref(0)

function onChange(checked: boolean) {
  checkState.value = checked ? 1 : 0
}
</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>

Props

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

Events

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

Slots

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