# 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示例
      ThorUI组件库小程序码 H5二维码 ThorUI示例小程序码
      Last Updated: 5/20/2024, 5:41:09 PM