tui-data-checkbox 数据选择器

介绍

数据选择器，可设置单选或多选。

引入

uni-app引入

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

import tuiDataCheckbox from "@/components/thorui/tui-data-checkbox/tui-data-checkbox.vue"
export default {
	components:{
		tuiDataCheckbox
	}
}

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

uni-app版本平台差异说明

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

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

{
  "usingComponents": {
    "tui-data-checkbox":"/components/thorui/tui-data-checkbox/tui-data-checkbox"
  }
}

代码演示

部分功能演示，具体可参考示例程序以及文档API。

单选

通过 options 属性设置数据集。

<!--uni-app-->
<view class="tui-dck--box">
	<tui-data-checkbox :options="options" @change="change"></tui-data-checkbox>
</view>

<!--微信小程序-->
<view class="tui-dck--box">
	<tui-data-checkbox options="{{options}}" bindchange="change"></tui-data-checkbox>
</view>

.tui-dck--box {
	width: 100%;
	padding: 0 30rpx 20rpx;
	box-sizing: border-box;
}

//data数据
options: ['上海', '北京', '广州', '深圳']

//事件
change(e) {
	console.log(e.detail)
	if (e.detail.index === -1) {
		console.log('已取消所有选择')
	} else {
		console.log(e.detail.value)
	}
}

单选，默认值，双向绑定

通过 options 属性设置数据集。

<!--uni-app-->
<view class="tui-dck--box">
	<tui-data-checkbox v-model="val" :options="options"></tui-data-checkbox>
</view>

<!--微信小程序-->
<view class="tui-dck--box">
	<tui-data-checkbox model:value="{{val}}" options="{{options}}"></tui-data-checkbox>
</view>

//data数据
options: ['上海', '北京', '广州', '深圳'],
val: '北京'

多选，设置固定宽度，max=3

通过 width 属性设置item项宽度，padding 属性设置内边距，size 属性设置字体大小，radius 属性设置圆角值，background 属性设置背景色，activeBgColor 属性设置选中后背景色，activeColor 属性设置选中后字体颜色，borderColor 属性设置选中后边框颜色，max 属性设置最大选择数，multiple 属性设置是否为多选。

<!--uni-app-->
<view class="tui-dck--box">
	<tui-data-checkbox :width="200" padding="20rpx" :size="26" radius="40rpx" background="#eee" activeBgColor="#fcedea"
		activeColor="#e41f19" borderColor="#e41f19" :max="3" v-model="vals2" multiple :options="options2">
	</tui-data-checkbox>
</view>

<!--微信小程序-->
<view class="tui-dck--box">
	<tui-data-checkbox width="{{200}}" padding="20rpx" size="{{26}}" radius="40rpx" background="#eee" activeBgColor="#fcedea"
		activeColor="#e41f19" borderColor="#e41f19" max="{{3}}" model:value="{{vals2}}" multiple options="{{options2}}">
	</tui-data-checkbox>
</view>

//data数据
//注意：小程序端双向绑定目前仅支持字符串，不支持数组格式，vals2得到的结果为字符串格式，需要自行转化
//uni-app
vals2: [], 
//微信小程序
//vals2: '[]',

options2: [{
	text: '河北省',
	value: 1000
}, {
	text: '吉林省',
	value: 2000
}, {
	text: '浙江省',
	value: 3000
}, {
	text: '福建省',
	value: 4000,
	//禁用不可选
	disable: true
}, {
	text: '广东省',
	value: 5000
}, {
	text: '安徽省',
	value: 6000
}]

Slots

名称	说明
-	-

Props

参数	类型	说明	默认值
options	Array	数据集，两种数据格式，具体见下方说明	[ ]
modelValue vue3	Array, String, Number	默认值	[ ]
value vue2	Array, String, Number	默认值	[ ]
multiple	Boolean	是否为多选	false
min	Number, String	最小选择数，仅单选时有效，可选值0、1	1
max	Number, String	最大选择数，仅多选时有效，-1表示不限制	-1
width	Number, String	item项宽度，单位rpx，0表示自适应	0
padding	String	item项padding值	20rpx 32rpx
gap	Number, String	item项之间间距，单位rpx	20
radius	String	item项圆角值	8rpx
size	Number, String	item项字体大小，单位rpx	24
color	String	item项字体颜色	#333
activeColor	String	item项选中后字体颜色	#5677fc
background	String	item项背景颜色	#fff
activeBgColor	String	item项选中后背景颜色	rgba(86, 119, 252, 0.1)
defaultBorderColor V2.8.0+	String	item项默认边框颜色，不传值则默认使用背景色	-
borderColor	String	item项选中后边框颜色	#5677fc

//options 数据格式
1、字符串数组
options: ['上海', '北京', '广州', '深圳']

2、对象数组，对象属性为约定属性
options2: [{
	//显示文本
	text: '河北省',
	//选择值
	value: 1000,
	//是否禁用不可选
	disable: true
},{
	text: '福建省',
	value: 4000
}]

Events

注意：uniapp端绑定事件使用@，微信小程序端使用 bind。

事件名	说明	回调参数
change	点击item项时触发，也可直接使用双向绑定	event.detail = {   value:选中数据,   index:索引值，仅单选返回 }

预览

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

线上程序扫码预览

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