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>

// data 数据 及 方法
export default {
 data() {
 	return {
 		checkboxItems: [{
 			name: '中国',
 			value: '1',
 			checked: true
 		},
 		{
 			name: '美国',
 			value: '2',
 			checked: false
 		},
 		{
 			name: '俄罗斯',
 			value: '3',
 			checked: false
 		}]
 	}
 },
 methods: {
 	
  }
}

.thorui-align__center {
	display: flex;
	align-items: center;
}
.tui-text {
	font-size: 30rpx;
	padding-left: 12rpx;
}

<!--微信小程序-->
<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>

// data 数据 及 方法
Page({
  data: {
   checkboxItems: [{
   	name: '中国',
   	value: '1',
   	checked: true
   },
   {
   	name: '美国',
   	value: '2',
   	checked: false
   },
   {
   	name: '俄罗斯',
   	value: '3',
   	checked: false
   }]
  }
})

.thorui-align__center {
	display: flex;
	align-items: center;
}
.tui-text {
	font-size: 30rpx;
	padding-left: 12rpx;
}

// Make sure to add code blocks to your code group

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

注：uni-app端绑定事件使用@前缀，如@change；微信小程序原生使用bind前缀，如bindchange

事件名	说明	回调参数
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
triggerGroup V2.2.0+	Boolean	当设置checked 属性值时是否触发父级change方法	true
disabled	Boolean	是否禁用	false
color	String	checkbox选中背景颜色	#5677fc
borderColor	String	checkbox未选中时边框颜色	#ccc
isCheckMark	Boolean	是否只展示对号，无边框背景	false
checkMarkColor	String	对号颜色	#fff
scaleRatio	[Number, String]	checkbox缩放倍数，改变checkbox大小	1

Events

注：uni-app端绑定事件使用@前缀，如@change；微信小程序原生使用bind前缀，如bindchange

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

注：tui-checkbox可单独使用。

预览

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

特别说明

该组件为 会员组件，非开源内容，需开通会员才可获取使用。

线上程序扫码预览

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