Tui Plus Vapor

Appearance

# t-checkbox

Checkbox 多选框

t-checkbox 组件介绍 ​

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

t-checkbox 平台兼容 ​

HarmonyH5AndroidiOS小程序UTS
✅✅✅✅✅✅

t-checkbox 基础用法 ​

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

vue
<template>
	<view class="p-15">
		<t-section title="主题-type-开启动画"
				   class="mb-15"></t-section>
		<view :class="[`fl mb-15 fww tvg r-10`]">
			<t-checkbox :transition="true"
						@change="onChange">
				<template #label>
					<t-text-light class="ml-8"
								  :patternsValue="['用户隐私协议']"
								  patternsColor="#2979ff">登录、注册代表您同意【用户隐私协议】</t-text-light>
				</template>
			</t-checkbox>
		</view>
		<t-section title="size-large"
				   class="mb-15 fww"></t-section>
		<view :class="[`fl mb-15 fww tvg r-10`]">
			<t-checkbox :checked="true"
						type="primary"
						size="large">石榴</t-checkbox>
			<t-checkbox type="primary"
						size="large">橙子</t-checkbox>
			<t-checkbox type="primary"
						size="large">香蕉</t-checkbox>
			<t-checkbox type="primary"
						size="large">橙子</t-checkbox>
		</view>
		<t-section title="size-medium"
				   class="mb-15 fww"></t-section>
		<view :class="[`fl mb-15 fww tvg r-10`]">
			<t-checkbox type="primary"
						size="medium">石榴</t-checkbox>
			<t-checkbox type="primary"
						size="medium">橙子</t-checkbox>
			<t-checkbox type="primary"
						size="medium">香蕉</t-checkbox>
			<t-checkbox type="primary"
						size="medium"
						:disabled="true">橙子</t-checkbox>
		</view>
		<t-section title="size-small"
				   class="mb-15 fww"></t-section>
		<view :class="[`fl mb-15 fww tvg r-10`]">
			<t-checkbox type="primary"
						size="small">石榴</t-checkbox>
			<t-checkbox type="primary"
						size="small">橙子</t-checkbox>
			<t-checkbox type="primary"
						size="small">香蕉</t-checkbox>
			<t-checkbox type="primary"
						size="small">橙子</t-checkbox>
		</view>
		<t-section title="size-mini"
				   class="mb-15 fww"></t-section>
		<view :class="[`fl mb-15 fww tvg r-10`]">
			<t-checkbox type="primary"
						size="mini">石榴</t-checkbox>
			<t-checkbox type="primary"
						size="mini">橙子</t-checkbox>
			<t-checkbox type="primary"
						size="mini">香蕉</t-checkbox>
			<t-checkbox type="primary"
						size="mini">橙子</t-checkbox>
		</view>
		<view :class="[`fl mb-15 fww tvg r-10`]">
			<t-section title="自定义图标 自定义样式 "
					   class="mb-15"></t-section>
			<t-checkbox type="primary"
						:transition="true"
						label-class="c-#666">梨子</t-checkbox>
			<t-checkbox type="warning"
						:transition="true"
						active-class="bg-blue bw-0!"
						active-label-class="c-red s-10"
						inactive-label-class="c-blue s-15">梨子</t-checkbox>
		</view>
		<t-section title="动态增删"
				   class="mb-15"></t-section>
		<view :class="[`fl mb-15 fww tvg r-10`]">
			<t-checkbox v-for="(item,index) in list"
						:key="index"
						type="primary"
						size="large"
						:transition="true">{{item.label}}</t-checkbox>
		</view>
		<view class="fl">
			<t-button class="mr-10"
					  type="primary"
					  @click="add">增加</t-button>
			<t-button type="error"
					  @click="del">删除</t-button>
		</view>
		<t-section title="按钮模式"
				   class="mtb-15"></t-section>
		<view :class="[`fl mb-15 fww tvg r-10 p-10`]">
			<t-checkbox class="mrb-10"
						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 class="mrb-10"
						size="small"
						type="success"
						mode="button"
						effect="dark">香蕉</t-checkbox>
			<t-checkbox class="mrb-10"
						size="mini"
						type="error"
						mode="button">橙子</t-checkbox>
			<t-checkbox class="mrb-10"
						size="mini"
						type="warning"
						mode="button">梨子</t-checkbox>
		</view>
		<view :class="[`mb-15 fww tvg r-10`]">
			<t-checkbox class="mb-5"
						type="primary"
						mode="button"
						size="large">石榴</t-checkbox>
			<t-checkbox class="mb-5"
						type="warning"
						mode="button"
						size="medium">橙子</t-checkbox>
			<t-checkbox class="mb-5"
						type="success"
						mode="button"
						size="small">香蕉</t-checkbox>
			<t-checkbox class="mb-5"
						type="error"
						mode="button"
						size="mini">橙子</t-checkbox>
			<t-checkbox class="mb-5"
						type="info"
						mode="button"
						size="mini">梨子</t-checkbox>
		</view>
		<t-section title="列表模式"
				   class="mtb-15"></t-section>
		<view :class="[`tvg r-10`]">
			<t-checkbox size="large"
						type="primary"
						mode="cell"
						:transition="true">石榴</t-checkbox>
			<t-checkbox size="large"
						type="warning"
						icon="thumb-up"
						mode="cell"
						:transition="true">橙子</t-checkbox>
			<t-checkbox size="large"
						type="success"
						mode="cell">香蕉</t-checkbox>
			<t-checkbox size="large"
						type="error"
						mode="cell"
						:transition="true">橙子</t-checkbox>
			<t-checkbox size="large"
						type="warning"
						mode="cell"
						:transition="true">梨子</t-checkbox>
		</view>
		<tui-theme-switch></tui-theme-switch>
	</view>
</template>

<script setup>
	import { TuiGuid } from '@/uni_modules/tui-common'
	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() {
		const a : radiolisttype = {
			value: TuiGuid(10),
			label: TuiGuid(10)
		}
		list.value.push(a)
	}
	function del() {
		list.value.splice(1, 1)
	}
	function onChange(e : boolean) {
		console.log(e)
	}
</script>

t-checkbox Props ​

属性名说明类型默认值
path点击组件后跳转的页面路径；为空时仅响应事件string''
hover是否启用点击效果booleanfalse
type组件主题类型，可选 info、primary、error、warning、successstring''
disabled是否禁用booleanfalse
effect组件显示主题，可选 normal、dark、light、plainstring''
size组件尺寸，可选 large、medium、small、ministring''
transition是否开启图标动画booleanfalse
duration图标动画时间number200
border是否显示边框booleantrue
checked是否被选中booleanfalse
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、buttonstring'checkbox'

t-checkbox Events ​

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

t-checkbox Slots ​

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