Skip to content
On this page

组件库文档 tmui.design

复选框 Checkbox

在一组备选项中进行多选。


🌶️ 复选框 Checkbox 示例

查看模拟效果
示例模板
vue
<template>
	<tm-app>
		<tm-sheet>
			<tm-text :font-size="24" _class="text-weight-b" label="基础示例,更多见文档"></tm-text>
			<tm-divider></tm-divider>
			<view class="flex flex-row">
				<tm-checkbox outlined label="苹果"></tm-checkbox>
				<tm-checkbox color="orange" label="香蕉"></tm-checkbox>
				<tm-checkbox color="green" label="其它水果"></tm-checkbox>
			</view>
		</tm-sheet>
		<tm-sheet :margin="[32, 0]">
			<tm-text :font-size="24" _class="text-weight-b" label="选择组"></tm-text>
			<tm-divider></tm-divider>
			<view class="pb-24">
				<tm-text :label="str ? str : '请选择'"></tm-text>
			</view>
			<tm-checkbox :indeterminate="banxuan" v-model="allCheckbox" @change="allChange" :value="true" label="全选"></tm-checkbox>
			<tm-checkbox-group @change="boxlistchange" v-model="checkboxlist" direction="customCol">
				<tm-checkbox
					value="apple"
					label="苹果常规赋值测试3.2秒后观察自动选中结果常规赋值测试3.2秒后观察自动选中结果常规赋值测试3.2秒后观察自动选中结果"
				></tm-checkbox>
				<tm-checkbox color="orange" value="banner" label="香蕉"></tm-checkbox>
				<tm-checkbox color="pink" value="test" label="测试项"></tm-checkbox>
				<tm-checkbox color="green" value="other" label="其它水果"></tm-checkbox>
			</tm-checkbox-group>
		</tm-sheet>
		<tm-sheet :margin="[32, 0]">
			<tm-text :font-size="24" _class="text-weight-b" label="常规赋值测试3.2秒后观察自动选中结果"></tm-text>
			<tm-divider></tm-divider>
			<view class="pb-24">
				<tm-text :label="str2"></tm-text>
			</view>

			<tm-checkbox-group @change="boxlistchange" v-model="checkboxlist1">
				<tm-checkbox v-for="(item, index) in listvalue" :key="index" :value="item.value" :label="item.label"></tm-checkbox>
			</tm-checkbox-group>
		</tm-sheet>

		<tm-sheet>
			<tm-text :font-size="24" _class="text-weight-b" label="一些样式属性"></tm-text>
			<tm-divider></tm-divider>
			<view class="flex flex-row flex-wrap">
				<tm-checkbox :size="54" :fontSize="28" value="apple" label="大小"></tm-checkbox>
				<tm-checkbox :round="10" color="orange" value="banner" label="形状"></tm-checkbox>
				<tm-checkbox color="orange" disabled value="banner" label="禁用"></tm-checkbox>
				<tm-checkbox icon="tmicon-position-fill" color="green" value="other" label="选中图标"></tm-checkbox>
				<tm-checkbox :border="1" linear="bottom" :defaultChecked="true" color="green" value="other" label="渐变"></tm-checkbox>
				<tm-checkbox border-style="dashed" color="green" value="other" label="虚线边框"></tm-checkbox>
			</view>
		</tm-sheet>
		<tm-sheet :margin="[32, 0]">
			<tm-text :font-size="24" _class="text-weight-b" label="选中前的勾子"></tm-text>
			<tm-divider></tm-divider>
			<view class="flex flex-row flex-wrap">
				<tm-checkbox :beforeChecked="beforeChecked" v-model="allCheckbox" value="88" label="异步选中"></tm-checkbox>
			</view>
		</tm-sheet>
	</tm-app>
</template>
<script lang="ts" setup>
import { ref, computed, nextTick } from 'vue'
import { onShow, onLoad } from '@dcloudio/uni-app'
import tmApp from '@/tmui/components/tm-app/tm-app.vue'
import tmSheet from '@/tmui/components/tm-sheet/tm-sheet.vue'
import tmText from '@/tmui/components/tm-text/tm-text.vue'
import tmCheckbox from '@/tmui/components/tm-checkbox/tm-checkbox.vue'
import tmCheckboxGroup from '@/tmui/components/tm-checkbox-group/tm-checkbox-group.vue'
import tmDivider from '@/tmui/components/tm-divider/tm-divider.vue'
const listvalue = ref([
	{ label: '香蕉', value: 'banner' },
	{ label: '数字1', value: 2 },
	{ label: '数字2', value: 8 },
	{ label: '其它', value: 'other' }
])
const checkboxlist1 = ref(['banner'])

const checkboxlist = ref(['banner'])
const str = computed(() => checkboxlist.value.join(' '))
const str2 = computed(() => checkboxlist1.value.join(','))
const banxuan = ref(true)
const allCheckbox = ref(false)
function allChange(e: boolean) {
	if (e == false) {
		checkboxlist.value = []
		banxuan.value = false
	} else if (e == true) {
		checkboxlist.value = ['apple', 'banner', 'test', 'other']
		banxuan.value = false
	}
}
function boxlistchange(e: Array<string>) {
	if (e.length == 0) {
		banxuan.value = false
		allCheckbox.value = false
	} else if (e.length == 4) {
		banxuan.value = false
		allCheckbox.value = true
	} else {
		banxuan.value = true
		allCheckbox.value = true
	}
}

function beforeChecked(e:any) {
	console.log(e)
	return new Promise((res) => {
		setTimeout(function () {
			
			res(true)
		}, 1000)
	})
}
checkboxlist1.value = [3, 4]
setTimeout(function () {
	listvalue.value = [
		{ label: '香蕉2', value: 3 },
		{ label: '其它3', value: 'other' },
		{ label: '其它34', value: 4 }
	]
}, 3200)

// console.log(uni.getSystemInfoSync())
</script>

🌶️ 兼容性

APP-VUEAPP-NVUE小程序WEB/H5VUE3/TS
✔️✔️✔️✔️✔️

🌱 参数

本组件含有公共属性 公共属性

参数名类型默认值描述
followTheme[Boolean,String]true是否跟随主题
sizeNumber42大小
transprentBooleanfalse是否透明
colorStringprimary主题色名称
roundNumber2圆角0-25,单位rpx
borderNumber2边框
value[String,Number,Boolean]true选项值,选中后返回的值
modelValue[String,Number,Boolean]falsev-model双向绑定,如果选中后以数组形式给出value值
label[String,Number]''文右边显示的选项文字
defaultChecked[Boolean]false默认是否选中状态。不受上方的modelValue控制,直接选中。
beforeChecked[Function,String,Boolean]false选中前的勾子。返回false将阻止选中。也可以返回 Promise异步,函数内已经传递当前的value值,可以直接赋值取得。
disabledBooleanfalse是否禁用
fontSizeNumber28字体大小
indeterminate[Boolean,String]false半选中状态
closeAni[Boolean,String]false是否关闭动画 ,对于大批量的数据时,建议关闭动画
iconStringtmicon-check自定义选中的图标名称
customBooleanfalse是否隐藏原本的状态组件

🌹 事件

事件名参数返回数据描述
update:modelValue-Array更新选中数据
change-modelValue复选框选中改变时返回当前的数据
click--复选框被点击时执行的函数

🌽 slot插槽

注意事项

由于uni中的vue3,是经常uni官方修改改.所以在使用带有插槽数据的组件时,如果使用了插槽来自定义内容那么就一定要标准的使用方法, 不可以使用简写,其它其它语法糖.

插槽名描述
default带有数据checked,用于模板内知道当前是否选中.
vue
<!-- 请注意我这里使用了标准的写法v-slot:default="{checked}" -->
<!-- 如果组件没有插槽数据,变成v-slot:default -->
<!-- 那怕你不使用数据,也要这么写.如果不写template v-slot:default="{checked}"> 将会产生兼容性,已知微信小程序会丢失插槽内容 -->
<tm-checkbox>
    <template v-slot:default="{checked}">
        <view class="flex flex-row">
            <tm-text label="我已经阅读并同意"></tm-text>
            <view >
                <tm-text   color="primary" label="《合作协议》"></tm-text>
            </view>
        </view>
    </template>
</tm-checkbox>

🌱 Group组件参数

Group组件含有公共属性 公共属性

参数名类型默认值描述
disabledBooleanfalse是否禁用
maxNumber999最大选中数量
defaultValueArray[]默认选中数据数组集合
modelValueArray[]v-model双向绑定,如果选中后以数组形式给出value值
directionStringrowrow横排,col为竖排,customCol:当你为竖向排列,且文字多行,要自动断行时使用此
alignString'left'对齐方式:left,center,right

🌹 Group组件事件

事件名参数返回数据描述
update:modelValue-Array更新选中数据
change-modelValue复选框选中改变时返回当前的数据

🥗 ref方法

方法名参数返回值描述

💏 文档贡献

此页文档由Sunlight贡献,如果对该框架感兴趣的可以参与我们一同进步!