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>

// data 数据 及 方法
export default {
 data() {
 	return {
 		//data数据
 		options: ['上海', '北京', '广州', '深圳']
 	}
 },
 methods: {
 	change(e) {
 		console.log(e.detail)
 		if (e.detail.index === -1) {
 			console.log('已取消所有选择')
 		} else {
 			console.log(e.detail.value)
 		}
 	}
 }
}

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

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

// data 数据 及 方法
Page({
  data: {
    //data数据
    options: ['上海', '北京', '广州', '深圳']
  },
  //事件
  change(e) {
  	console.log(e.detail)
  	if (e.detail.index === -1) {
  		console.log('已取消所有选择')
  	} else {
  		console.log(e.detail.value)
  	}
  }
})

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

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

单选，默认值，双向绑定

通过 options 属性设置数据集。

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

// data 数据 及 方法
export default {
 data() {
 	return {
 		//data数据
 		options: ['上海', '北京', '广州', '深圳'],
 		val: '北京'
 	}
 },
 methods: {
 	change(e) {
 		console.log(e.detail)
 		if (e.detail.index === -1) {
 			console.log('已取消所有选择')
 		} else {
 			console.log(e.detail.value)
 		}
 	}
 }
}

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

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

// data 数据 及 方法
Page({
  data: {
    //data数据
    options: ['上海', '北京', '广州', '深圳'],
    val: '北京'
  },
  //事件
  change(e) {
  	console.log(e.detail)
  	if (e.detail.index === -1) {
  		console.log('已取消所有选择')
  	} else {
  		console.log(e.detail.value)
  	}
  }
})

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

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

多选，设置固定宽度，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>

// data 数据 及 方法
export default {
 data() {
 	return {
 		//data数据
 		vals2: [], 
 		options2: [{
 			 text: '河北省',
 			 value: 1000
 		}, {
 			 text: '吉林省',
 			 value: 2000
 		}, {
 			 text: '浙江省',
 			 value: 3000
 		 }, {
 			 text: '福建省',
 			 value: 4000,
 			 //禁用不可选
 			 disable: true
 		 }, {
 			 text: '广东省',
 			 value: 5000
 		 }, {
 			text: '安徽省',
 			value: 6000
 		}]
 	}
 },
 methods: {
 	
 }
}

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

<!--微信小程序-->
<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 数据 及 方法
Page({
  data: {
    //data数据
    vals2: [], 
    options2: [{
 		 text: '河北省',
 		 value: 1000
 	}, {
 		 text: '吉林省',
 		 value: 2000
 	}, {
 		 text: '浙江省',
 		 value: 3000
 	 }, {
 		 text: '福建省',
 		 value: 4000,
 		 //禁用不可选
 		 disable: true
 	 }, {
 		 text: '广东省',
 		 value: 5000
 	 }, {
 		text: '安徽省',
 		value: 6000
    }]
  }
})

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

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

Slots

插槽名称	说明
-	-

Props

属性名	类型	说明	默认值
options	Array	数据集，两种数据格式，具体见下方说明	[ ]
textField v3.0.0+	String	数据集中text文本指定的key	text
valueField v3.0.0+	String	数据集中value指定的key	value
disableField v3.0.0+	String	数据集中disable指定的key	disable
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: [{
	//显示文本，可使用 属性 textField 指定key
	text: '河北省',
	//选择值，可使用 属性 valueField 指定key
	value: 1000,
	//是否禁用不可选，可使用 属性 disableField 指定key
	disable: true
},{
	text: '福建省',
	value: 4000
}]

Events

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

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

预览

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

特别说明

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

线上程序扫码预览

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