# 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示例
ThorUI组件库小程序码 H5二维码 ThorUI示例小程序码