# tui-select 选择框

介绍

选择框,底部弹出选择框,支持单选和多选。

# 引入

# uni-app引入

第一种,手动引入(可全局引入)

import tuiSelect from "@/components/thorui/tui-select/tui-select"
export default {
	components:{
		tuiSelect
	}
}

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

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

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

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

{
  "usingComponents": {
    "tui-select": "/components/thorui/tui-select/tui-select"
  }
}

# 代码演示

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

单选
<!--uni-app-->
<tui-select :list="list" :show="show" @confirm="confirm" @close="onClose"></tui-select>

<!--微信小程序-->
<tui-select list="{{list}}" show="{{show}}" bindconfirm="confirm" bindclose="onClose"></tui-select>
//data
show: false,
//当需要设置默认选中时,使用list2格式数据
list: ['单选选项一', '单选选项二', '单选选项三', '单选选项四', '单选选项五', '单选选项六'],

//methods  uni-app
showSelect() {
	this.show = true
},
confirm(e) {
	console.log(e)
	this.tui.toast(e.options || '未选择~')
	this.onClose()
},
onClose() {
	this.show = false
}

//methods  微信小程序
showSelect() {
    this.setData({
      show:true
    })
},
confirm(e) {
    console.log(e.detail)
    wx.tui.toast(e.detail.options || '未选择~')
    this.onClose()
},
onClose() {
    this.setData({
      show:false
    })
}
多选

通过 multiple 属性设置是否为多选

<!--uni-app-->
<tui-select :list="list2" multiple reverse :show="show2" @confirm="confirm2" @close="onClose2"></tui-select>

<!--微信小程序-->
<tui-select list="{{list2}}" multiple reverse show="{{show2}}" bindconfirm="confirm2" bindclose="onClose2"></tui-select>
//data
show2: false,
list2: [{
	text: '多选选项一',
	value: 1
}, {
	text: '多选选项二',
	value: 2,
	//默认选中
	checked: true
}, {
	text: '多选选项三',
	value: 3,
	//默认选中
	checked: true
}, {
	text: '多选选项四',
	value: 4
}, {
	text: '多选选项五',
	value: 5
}, {
	text: '多选选项六',
	value: 6
}, {
	text: '多选选项七',
	value: 7
}, {
	text: '多选选项八',
	value: 8
}]

# Slots

名称 说明
- -

# Props

参数 类型 说明 默认值
show Boolean 是否显示选择框 false
list Array 选择数据,具体格式见下方说明 [ ]
height Number, String 选择器数据区域高度,单位rpx 600
radius Number, String 选择器上方左右圆角值,单位rpx 24
title String 标题文本 请选择
titleSize Number, String 标题字体大小,单位rpx 32
titleColor String 标题字体颜色 #333
fontWeight Number, String 标题字体字重 400
multiple Boolean 是否为多项选择,type为select时有效 false
background String 内容区域背景颜色 #fff
padding String item项padding值 30rpx
checkboxColor String 选择框选中后颜色 #5677fc
borderColor String 选择框未选中时边框颜色 #ccc
isCheckMark Boolean 选择框是否仅展示对号,无边框背景 false
checkmarkColor String 选择框对号颜色 #fff
reverse Boolean 选择框与内容是否颠倒排列 false
dividerLine Boolean item项之间是否需要分割线条 true
dividerColor String 所有线条颜色 #EEEEEE
bottomLeft Number, String item线条距离左边偏移距离,单位rpx 30
highlight Boolean item项点击是否有高亮效果 true
iconWidth Number, String item项图片图标宽度,单位rpx,高度与宽度相等 48
size Number, String item项字体大小,单位rpx 30
color String item项字体颜色 #333
btnText String 确定按钮文本,type为select时有效 确定
btnBackground String 确定按钮背景颜色,type为select时有效 #5677fc
btnColor String 确定按钮文本颜色 #fff
maskBackground String 遮罩背景颜色 rgba(0,0,0,.6)
maskClosable Boolean 点击遮罩是否可关闭选择器,为true时点击触发close事件 false
zIndex Number, String 选择器层级z-index值 1000
//list 数据格式说明

//数据格式一,字符串数组
//当需要设置默认选项时,使用格式二中数据格式
list:['单选选项一', '单选选项二', '单选选项三', '单选选项四', '单选选项五', '单选选项六']

//数据格式二,以下text、src、checked为约定属性
list:[{
	text: '多选选项一',
	value: 1,
	//item图标地址,可选
	src: '',
	//是否选中,可选
	checked:false
}]

# Events

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

事件名 说明 回调参数
confirm 点击确定按钮时触发,返回选中数据 {
  options:选中数据,
  index:索引值,仅单选返回
}
close 点击关闭按钮时触发 -

# 预览

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

# 线上程序扫码预览

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