t-checkbox-group

CheckboxGroup 多选框组

组件介绍

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

平台兼容

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

基础用法

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

<template>
  <!-- 基础复选框组 -->
  <t-checkbox-group v-model="selectedValues" class="mb-30">
    <t-checkbox value="1" label="选项1" class="mr-30"></t-checkbox>
    <t-checkbox value="2" label="选项2" class="mr-30"></t-checkbox>
    <t-checkbox value="3" label="选项3" class="mr-30"></t-checkbox>
    <t-checkbox value="4" label="选项4" disabled></t-checkbox>
  </t-checkbox-group>
  <t-text>选中值: {{ selectedValues }}</t-text>

  <!-- 按钮模式复选框组 -->
  <t-checkbox-group v-model="selectedButtonValues" mode="button" type="primary" class="mb-30">
    <t-checkbox value="1" label="按钮1" class="mr-20"></t-checkbox>
    <t-checkbox value="2" label="按钮2" class="mr-20"></t-checkbox>
    <t-checkbox value="3" label="按钮3" class="mr-20"></t-checkbox>
  </t-checkbox-group>
  <t-text>按钮模式选中值: {{ selectedButtonValues }}</t-text>

  <!-- 单元格模式复选框组 -->
  <t-checkbox-group v-model="selectedCellValues" mode="cell" class="mb-30">
    <t-checkbox value="1" label="单元格1"></t-checkbox>
    <t-checkbox value="2" label="单元格2"></t-checkbox>
    <t-checkbox value="3" label="单元格3"></t-checkbox>
  </t-checkbox-group>
  <t-text>单元格模式选中值: {{ selectedCellValues }}</t-text>
</template>

<script setup>
const selectedValues = ref(['1', '3']);
const selectedButtonValues = ref(['2']);
const selectedCellValues = ref([]);
</script>

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

Events

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

Slots

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