# tui-select 选择框 会员组件
介绍
选择框,底部弹出选择框,支持单选和多选。
# 引入
# uni-app引入
第一种,手动引入(可全局引入)
import tuiSelect from "@/components/thorui/tui-select/tui-select.vue"
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>
// data 数据 及 方法
export default {
data() {
return {
//data
show: false,
list: ['单选选项一', '单选选项二', '单选选项三', '单选选项四', '单选选项五', '单选选项六'],
}
},
methods: {
//调用此方法显示选择弹框
showSelect() {
this.show = true
},
confirm(e) {
console.log(e)
this.tui.toast(e.options || '未选择~')
this.onClose()
},
onClose() {
this.show = false
}
}
}
<!--微信小程序-->
<tui-select list="{{list}}" show="{{show}}" bindconfirm="confirm" bindclose="onClose"></tui-select>
// data 数据 及 方法
Page({
data: {
//data
show: false,
list: ['单选选项一', '单选选项二', '单选选项三', '单选选项四', '单选选项五', '单选选项六'],
},
//调用此方法显示选择弹框
showSelect() {
this.setData({
show:true
})
},
confirm(e) {
console.log(e.detail)
wx.tui.toast(e.detail.options || '未选择~')
this.onClose()
},
onClose() {
this.setData({
show:false
})
}
})
// Make sure to add code blocks to your code group
多选
通过 multiple
属性设置是否为多选
<!--uni-app-->
<tui-select :list="list2" multiple reverse :show="show2" @confirm="confirm2" @close="onClose2"></tui-select>
// data 数据 及 方法
export default {
data() {
return {
//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
}]
}
},
methods: {
showSelect2() {
this.show2 = true
},
confirm2(e) {
console.log(e)
let options = e.options
let text = []
options.forEach((item, index) => {
text.push(item.text)
})
this.tui.toast(text.join(',') || '未选择~')
this.onClose2()
},
onClose2() {
this.show2 = false
}
}
}
<!--微信小程序-->
<tui-select list="{{list2}}" multiple reverse show="{{show2}}" bindconfirm="confirm2" bindclose="onClose2"></tui-select>
// data 数据 及 方法
Page({
data: {
//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
}]
},
showSelect2() {
this.setData({
show2:true
})
},
confirm2(e) {
console.log(e.detail)
let options = e.detail.options
let text = []
options.forEach((item, index) => {
text.push(item.text)
})
wx.tui.toast(text.join(',') || '未选择~')
this.onClose2()
},
onClose2() {
this.setData({
show2:false
})
}
})
// Make sure to add code blocks to your code group
# Slots
插槽名称 | 说明 |
---|---|
- | - |
# Props
属性名 | 类型 | 说明 | 默认值 |
---|---|---|---|
show | Boolean | 是否显示选择框 | false |
list | Array | 选择数据,具体格式见下方说明 | [ ] |
textField v3.0.0+ | String | 选择数据中text文本指定key | text |
valueField v3.0.0+ | String | 选择数据中value指定key,预留key | value |
srcField v3.0.0+ | String | 选择数据中src图标地址指定key | src |
checkedField v3.0.0+ | String | 选择数据中checked指定key | checked |
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 |
iconBgColor V2.9.0+ | String | item项图片图标背景色 | #F8F8F8 |
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(可通过textField属性指定)、src(可通过srcField属性指定)、checked(可通过checkedField属性指定)、disabled为约定属性
list:[{
//可通过textField属性指定
text: '多选选项一',
value: 1,
//item图标地址,可选,可通过srcField属性指定
src: '',
//是否选中,可选,可通过checkedField属性指定
checked:false,
//是否禁用选择 【V2.2.0+】
disabled:false
}]
# Events
注:uni-app端绑定事件使用@前缀,如@confirm;微信小程序原生使用bind前缀,如bindconfirm
事件名 | 说明 | 回调参数 |
---|---|---|
confirm | 点击确定按钮时触发,返回选中数据 | { options:选中数据, index:索引值,仅单选返回 } |
close | 点击关闭按钮时触发 | - |
# 预览
请以移动端效果为准,touch事件目前尚未在PC端做兼容。
# 特别说明
该组件为 会员组件
,非开源内容,需开通会员才可获取使用。
# 线上程序扫码预览
![]() | ![]() | ![]() |
---|---|---|
ThorUI组件库小程序码 | H5二维码 | ThorUI示例小程序码 |