Checkbox (多选-复选框)
选择多个选项。组件支持自定义样式、状态和事件自定义图标，适用于各种表单场景，提升用户体验和操作便捷性。
支持平台
| 安卓 | ios | 鸿蒙 | web | 微信小程序 |
|---|---|---|---|---|
| √ | √ | √ | √ | √ |
示例代码
html
<template>
<t-page main-class="p-30">
<t-section title="主题-type-开启动画" main-class="mb-30"></t-section>
<t-row main-class="mb-30 fww tdb tdr">
<t-checkbox :transition="true" @change="onChange" :checked="checked">石榴</t-checkbox>
<t-checkbox type="primary" icon="thumb-up" active-icon-class="ats-0.5" :transition="true">橙子</t-checkbox>
<t-checkbox type="error" :transition="true">橙子</t-checkbox>
<t-checkbox type="warning" :transition="true">梨子</t-checkbox>
</t-row>
<t-section title="size-large" main-class="mb-30 fww"></t-section>
<t-row main-class="mb-30 fww tdb tdr">
<t-checkbox :checked="true" type="p" size="large">石榴</t-checkbox>
<t-checkbox type="p" size="large">橙子</t-checkbox>
<t-checkbox type="p" size="large">香蕉</t-checkbox>
<t-checkbox type="p" size="large">橙子</t-checkbox>
</t-row>
<t-section title="size-medium" main-class="mb-30 fww"></t-section>
<t-row main-class="mb-30 fww tdb tdr">
<t-checkbox type="p" size="medium">石榴</t-checkbox>
<t-checkbox type="p" size="medium">橙子</t-checkbox>
<t-checkbox type="p" size="medium">香蕉</t-checkbox>
<t-checkbox type="p" size="medium" :disabled="true">橙子</t-checkbox>
</t-row>
<t-section title="size-small" main-class="mb-30 fww"></t-section>
<t-row main-class="mb-30 fww tdb tdr">
<t-checkbox type="p" size="small">石榴</t-checkbox>
<t-checkbox type="p" size="small">橙子</t-checkbox>
<t-checkbox type="p" size="small">香蕉</t-checkbox>
<t-checkbox type="p" size="small">橙子</t-checkbox>
</t-row>
<t-section title="size-mini" main-class="mb-30 fww"></t-section>
<t-row main-class="mb-30 fww tdb tdr">
<t-checkbox type="p" size="mini">石榴</t-checkbox>
<t-checkbox type="p" size="mini">橙子</t-checkbox>
<t-checkbox type="p" size="mini">香蕉</t-checkbox>
<t-checkbox type="p" size="mini">橙子</t-checkbox>
</t-row>
<t-row main-class="mb-30 fww tdb tdr">
<t-section title="自定义图标 自定义样式 " main-class="mb-30"></t-section>
<t-checkbox type="primary" :transition="true" main-class="s-80" label-class="c-#666">梨子</t-checkbox>
<t-checkbox type="warning" :transition="true" active-class="bg-blue" active-label-class="c-red s-20"
inactive-label-class="c-blue s-30">梨子</t-checkbox>
</t-row>
<t-section title="动态增删" main-class="mb-30"></t-section>
<t-row main-class="mb-30 fww tdb tdr">
<t-checkbox v-for="(item,index) in list" :key="index" icon="checkbox-blank-circle-fill"
active-icon-class="s-20" type="primary" size="l" :transition="true">{{item.label}}</t-checkbox>
</t-row>
<t-row>
<t-button main-class="mr-20" type="p" @click="add">增加</t-button>
<t-button type="e" @click="del">删除</t-button>
</t-row>
<t-section title="按钮模式" main-class="mtb-30"></t-section>
<t-row main-class="mb-30 fww tdb tdr tdp">
<t-checkbox main-class="mrb-20" size="large" active-class="bg-#fff" inactive-class="bg-#000"
active-label-class="c-#000" inactive-label-class="c-#fff" type="primary" mode="button">石榴</t-checkbox>
<t-checkbox main-class="mrb-20" size="medium" type="warning" mode="button" effect="l">橙子</t-checkbox>
<t-checkbox main-class="mrb-20" size="small" type="success" mode="button" effect="d">香蕉</t-checkbox>
<t-checkbox main-class="mrb-20" size="mini" type="error" mode="button">橙子</t-checkbox>
<t-checkbox main-class="mrb-20" size="mini" type="warning" mode="button">梨子</t-checkbox>
</t-row>
<t-col main-class="mb-30 fww tdb tdr">
<t-checkbox main-class="mb-10" type="primary" mode="button" size="large">石榴</t-checkbox>
<t-checkbox main-class="mb-10" type="warning" mode="button" size="medium">橙子</t-checkbox>
<t-checkbox main-class="mb-10" type="success" mode="button" size="small">香蕉</t-checkbox>
<t-checkbox main-class="mb-10" type="error" mode="button" size="mini">橙子</t-checkbox>
<t-checkbox main-class="mb-10" type="info" mode="button" size="mini">梨子</t-checkbox>
</t-col>
<t-section title="列表模式" main-class="mtb-30"></t-section>
<t-col main-class="tdb tdr">
<t-checkbox size="l" type="primary" mode="cell" :transition="true">石榴</t-checkbox>
<t-checkbox size="l" type="warning" icon="thumb-up" active-icon-class="ats-0.5" mode="cell"
:transition="true">橙子</t-checkbox>
<t-checkbox size="l" type="success" icon="checkbox-blank-circle-fill" icon-class="ats-0.5"
mode="cell">香蕉</t-checkbox>
<t-checkbox size="l" type="error" mode="cell" :transition="true">橙子</t-checkbox>
<t-checkbox size="l" type="warning" mode="cell" :transition="true">梨子</t-checkbox>
</t-col>
</t-page>
</template>
<script setup>
import { TuiGuid } from '@/uni_modules/tui-plus'
type radiolisttype = {
value : string
label : string
}
const checked=ref<boolean>(false)
const list = ref<radiolisttype[]>([
{ value: '1', label: '石榴' },
{ value: '2', label: '橙子' },
{ value: '3', label: '香蕉' },
{ value: '4', label: '橙子' },
{ value: '5', label: '梨子' }
] as radiolisttype[])
function add() {
list.value.push({
value: TuiGuid(10),
label: TuiGuid(10)
} as radiolisttype)
}
function del() {
list.value.splice(1, 1)
}
function onChange(e : boolean) {
console.log(e)
}
</script>属性
| 名称 | 类型 | 默认值 | 说明 | 可选值 |
|---|---|---|---|---|
| size | String | mini | 组件尺寸 | large(大尺寸), medium(中尺寸), small(小尺寸), mini(迷你) |
| type | String | "" | 组件类型 | info(信息), primary(正常), error(错误), warning(警告), success(成功) |
| disabled | Boolean | false | 组件是否禁用 | false, true |
| stop | Boolean | false | 是否阻止事件冒泡（Tui统一写法处理事件冒泡） | false, true |
| hover | Boolean | true | 是否有点击效果 | false, true |
| path | String | "" | 点击组件后跳转的页面路径，如果为空则响应点击事件，如果不为空则跳转页面不会响应单击事件。 | - |
| mainClass | String | "" | 组件根节点的样式 | - |
| nativeClass | String | "" | 组件根节点原生样式 | - |
| effect | String | "normal" | 组件显示主题 | normal(正常), dark(深色), light(浅色), plain(镂空) |
| transition | Boolean | false | 是否开启图标动画 | |
| duration | Number | 200 | 图标动画时间 | |
| border | Boolean | true | 是否显示边框 | |
| checked | Boolean | false | 是否被选中 | |
| value | String | `` | 当前选中的值 | |
| label | String | `` | 标签 | |
| labelClass | String | `` | 标签的样式 | |
| icon | String | check-fill | 图标 | |
| iconBoxClass | String | `` | 图标盒子的样式 | |
| activeClass | String | `` | 被选中时的样式 | |
| inactiveClass | String | `` | 未选中时的样式 | |
| iconClass | String | `` | 图标样式 | |
| activeIconClass | String | `` | 被选中是图标的样式 | |
| inactiveIconClass | String | `` | 未被选中时图标的样式 | |
| activeLabelClass | String | `` | 被选中是标签的样式 | |
| inactiveLabelClass | String | `` | 未被选中是标签的样式 | |
| mode | String | checkbox | 筛选框的样式 | checkbox: 复选框框样式cell: 列表模式button: 按钮模式 |
事件
| 名称 | 返回参数 | 说明 |
|---|---|---|
| change | 选中的状态 | 复选框状态变化时触发 |
插槽
| 名称 | 返回值 | 说明 |
|---|---|---|
| default | - |