ThorUI文档

# tui-checkbox 多项选择器

介绍

多项选择器，支持放大缩小，支持自定义颜色。

注意

该组件可结合 tui-checkbox-group 组件一起使用，也可以单独使用。

微信小程序端 tui-checkbox-group 组件内使用到了 tui-form-field 组件，所以需要同时引入这些组件到项目中。

# 引入

# uni-app引入

第一种，手动引入（可全局引入）

import tuiCheckbox from "@/components/thorui/tui-checkbox/tui-checkbox.vue"
import tuiCheckboxGroup from "@/components/thorui/tui-checkbox-group/tui-checkbox-group.vue"
export default {
	components:{
		tuiCheckbox,
		tuiCheckboxGroup
	}
}

第二种，开启easycom组件模式，如果不了解如何配置，可先查看 官网文档 (opens new window)。

# uni-app版本平台差异说明

App-Nvue App-vue H5 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
√ √ √ √ √ √ √ √

# 微信小程序引入（可在app.json中全局引入）

{
  "usingComponents": {
	"tui-checkbox": "/components/thorui/tui-checkbox/tui-checkbox",
    "tui-checkbox-group": "/components/thorui/tui-checkbox-group/tui-checkbox-group"
  }
}

# 代码演示

部分代码片段演示，具体可参考示例程序以及文档API。

推荐展示 | 改变颜色
<!--uni-app-->
<tui-checkbox-group>
	<tui-label v-for="(item,index) in checkboxItems" :key="index">
		<tui-list-cell>
			<view class="thorui-align__center">
				<tui-checkbox :checked="item.checked" :value="item.value" color="#f8683c"
					borderColor="#999">
				</tui-checkbox>
				<text class="tui-text">{{item.name}}</text>
			</view>
		</tui-list-cell>
	</tui-label>
</tui-checkbox-group>

<!--微信小程序-->
<tui-checkbox-group>
  <tui-label wx:for="{{checkboxItems}}" wx:key="index">
	<tui-list-cell>
	  <view class="thorui-align__center">
		<tui-checkbox checked="{{item.checked}}" value="{{item.value}}" color="#f8683c" borderColor="#999">
		</tui-checkbox>
		<text class="tui-text">{{item.name}}</text>
	  </view>
	</tui-list-cell>
  </tui-label>
</tui-checkbox-group>
	

checkboxItems: [{
	name: '中国',
	value: '1',
	checked: true
},
{
	name: '美国',
	value: '2',
	checked: false
},
{
	name: '俄罗斯',
	value: '3',
	checked: false
}]

# tui-form-field

此组件只为form表单提交传递数据使用，暂时仅用于微信/百度小程序

# Slots

名称 说明
default 标签显示内容，将控件放入标签内

# Props

参数 类型 说明 默认值
hidden Boolean 是否为隐藏域 false

# Events

事件名 说明 回调参数
- - -

# tui-checkbox-group

多项选择器，内部由多个 tui-checkbox 组成。

# Slots

名称 说明
default 标签显示内容，将控件放入标签内

# Props

参数 类型 说明 默认值
name String 表单中名称 -
value Array 选择的value值，用于双向绑定 [ ]
modelValue Array 选中的value值，用于双向绑定，vue3使用 [ ]

# Events

事件名 说明 回调参数
change tui-checkbox-group中的选中项发生变化时触发 change 事件 detail = {value:[选中的checkbox的value的数组]}
input 用于组件双向绑定，使用v-model指令即可 value
update:modelValue vue3 用于组件双向绑定，使用v-model指令即可，仅uni-app modelValue

注：获取选中的值也可以直接使用双向绑定获取，uni-app端为 v-model 指令，微信小程序端为 model:value，原生小程序版本目前不支持直接返回数组，返回的值为数组字符串，需要自行转化。

# tui-checkbox

单选项目。

# Slots

名称 说明
- -

# Props

参数 类型 说明 默认值
value String value值，当选中时会携带该值 -
checked Boolean 当前是否选中 false
disabled Boolean 是否禁用 false
color String checkbox选中背景颜色 #5677fc
borderColor String checkbox未选中时边框颜色 #ccc
isCheckMark Boolean 是否只展示对号，无边框背景 false
checkMarkColor String 对号颜色 #fff
scaleRatio [Number, String] checkbox缩放倍数，改变checkbox大小 1

# Events

事件名 说明 回调参数
change 选中状态发生改变时触发 {checked,value}

注：tui-checkbox可单独使用。

# 预览

请以移动端效果为准，touch事件目前尚未在PC端做兼容。

# 线上程序扫码预览

ThorUI组件库 H5二维码 ThorUI示例
ThorUI组件库小程序码 H5二维码 ThorUI示例小程序码

← tui-switch 开关 →