t-checkbox

Checkbox 多选框

组件介绍

t-checkbox 是一个多选复选框组件，支持自定义样式、状态和事件自定义图标，适用于各种表单场景。组件提供了多种模式（复选框、按钮、单元格），支持主题类型、尺寸、禁用状态等配置，可与 t-checkbox-group 组件配合使用，实现多选功能。

平台兼容

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

基础用法

基础用法参考 demo/checkbox/checkbox.uvue，通过 checked 属性设置选中状态，使用 label 属性设置标签文本。

<template>
  <!-- 基础复选框 -->
  <t-checkbox v-model:checked="checked1" label="选项1" class="mb-20"></t-checkbox>
  <t-checkbox v-model:checked="checked2" label="选项2" class="mb-20"></t-checkbox>
  <t-checkbox v-model:checked="checked3" label="选项3" disabled class="mb-20"></t-checkbox>

  <!-- 按钮模式 -->
  <t-checkbox mode="button" v-model:checked="checked4" label="按钮1" type="primary" class="mr-20"></t-checkbox>
  <t-checkbox mode="button" v-model:checked="checked5" label="按钮2" type="success" class="mr-20"></t-checkbox>
  <t-checkbox mode="button" v-model:checked="checked6" label="按钮3" type="warning" class="mr-20"></t-checkbox>

  <!-- 单元格模式 -->
  <t-checkbox mode="cell" v-model:checked="checked7" label="单元格1" class="mb-10"></t-checkbox>
  <t-checkbox mode="cell" v-model:checked="checked8" label="单元格2" class="mb-10"></t-checkbox>
</template>

<script setup>
const checked1 = ref(false);
const checked2 = ref(true);
const checked3 = ref(false);
const checked4 = ref(false);
const checked5 = ref(true);
const checked6 = ref(false);
const checked7 = ref(false);
const checked8 = ref(true);
</script>

Props

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

Events

事件名	说明	回调参数
change	复选框状态变化时触发	boolean
select	选择时触发	boolean
click	点击时触发	UniPointerEvent
initFinished	组件初始化完成时触发，返回组件节点信息	NodeInfo
touchstart	触摸开始时触发	-
touchend	触摸结束时触发	-
touchmove	触摸移动时触发	-
touchcancel	触摸取消时触发	-
transitionend	动画结束时触发	-

Slots

插槽名	说明
default	默认插槽，用于自定义标签内容
label	标签插槽，用于自定义标签的显示