tui-picker 选择器 会员组件

介绍

支持1~3级数据，3级以上数据使用tui-cascade-selection组件。

引入

uni-app引入

第一种，手动引入（可全局引入）

import tuiPicker from "@/components/thorui/tui-picker/tui-picker.vue"
export default {
	components:{
		tuiPicker
	}
}

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

uni-app版本平台差异说明

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

微信小程序引入（可在app.json中全局引入）

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

代码演示

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

默认使用

通过 show 属性控制选择器的显示隐藏，通过 pickerData 属性设置data数据 。

<!--uni-app-->
<tui-picker :show="show__1" :pickerData="items__1" @hide="hide" @change="change">
</tui-picker>

// data 数据 及 方法
export default {
 data() {
 	return {
 		show__1: false,
 		items__1: [{
 			text: "中国",
 			value: "1001"
 		}, {
 			text: "美国",
 			value: "1002"
 		}, {
 			text: "俄罗斯",
 			value: "1003"
 		}]
 	}
 },
 methods: {
 	//选择结果
 	change(e) {
 		console.log(e)
 	},
 	hide(e) {
 		this.show__1 = false
 	},
 	//调用此方法显示picker选择器
 	picker__1() {
 		this.show__1 = true;
 	}
 }
}

<!--微信小程序-->
<tui-picker show="{{show__1}}" pickerData="{{items__1}}" bindhide="hide" bindchange="change">

// data 数据 及 方法
Page({
  data: {
    show__1: false,
    items__1: [{
    	text: "中国",
    	value: "1001"
    }, {
    	text: "美国",
    	value: "1002"
    }, {
    	text: "俄罗斯",
    	value: "1003"
    }]
  },
  //选择结果
  change(e) {
  	console.log(e)
  },
  hide(e) {
 	this.setData({
 		show__1:false
 	})
  },
  //调用此方法显示picker选择器
  picker__1() {
 	 this.setData({
 	 	show__1:true
 	 })
  }
})

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

二级数据

通过 layer 属性设置数据层级。

<!--uni-app-->
<tui-picker :show="show__2" :layer="2" :pickerData="items__2" :params="1" @hide="hide" @change="change">
</tui-picker>

// data 数据 及 方法
export default {
 data() {
 	return {
 		show__2: false,
 		items__2: [{
 			text: '广东省',
 			value: '100',
 			children: [{
 				text: '广州市',
 				value: '10001'
 			}, {
 				text: '深圳市',
 				value: '10002'
 			}]
 		}, {
 			text: '安徽省',
 			value: '200',
 			children: [{
 				text: '合肥市',
 				value: '20001'
 			}, {
 				text: '安庆市',
 				value: '20002'
 			}]
 		}]
 	}
 },
 methods: {
 	hide(e) {
 		this.show__2 = false
 	},
 	//调用此方法显示picker
 	picker__2() {
 		this.show__2 = true;
 	},
 	//选择结果
 	change(e) {
 		console.log(e)
 	}
 }
}

<!--微信小程序-->
<tui-picker show="{{show__2}}" layer="{{2}}" pickerData="{{items__2}}" params="{{1}}" bindhide="hide"
bindchange="change">
</tui-picker>

// data 数据 及 方法
Page({
  data: {
    show__2: false,
    items__2: [{
     	text: '广东省',
     	value: '100',
     	children: [{
    		  text: '广州市',
    		  value: '10001'
     	}, {
    		  text: '深圳市',
    		 value: '10002'
     	}]
      }, {
     	text: '安徽省',
     	value: '200',
     	children: [{
    		text: '合肥市',
    		value: '20001'
      }, {
    		 text: '安庆市',
    		 value: '20002'
      }]
    }]
  },
  hide(e) {
 	 this.setData({
 		show__2:false
 	 })
  },
  //调用此方法显示picker
  picker__2() {
 	 this.setData({
 	 	show__2:true
 	 })
  },
  //选择结果
  change(e) {
  	console.log(e)
  }
})

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

注：数据格式约定的属性为：text（可使用 textField 属性指定），value（可使用 valueField 属性指定），children（可使用 childrenField 属性指定），其余属性可自行扩展。

Slots

插槽名称	说明
-	-

Props

属性名	类型	说明	默认值
layer	[Number, String]	数据层级	1
pickerData	Array	data数据，目前只支持一次性传入所有数据	[ ]
textField v3.0.0+	String	data数据显示文本指定key	text
valueField v3.0.0+	String	data数据value值指定key	value
childrenField v3.0.0+	String	data数据子级children指定key	children
show	Boolean	是否显示	false
value	Array	初始化显示数据，text集合	[ ]
indicatorStyle	String	设置选择器中间选中框的样式	height: 48px;
maskStyle	String	设置蒙层的样式	-
radius	Boolean	是否显示圆角	false
headerBgColor	String	header背景色	#fff
title	String	显示标题	-
titleSize	[Number, String]	标题字体大小，单位rpx	34
titleColor	String	标题字体颜色	#333
confirmText	String	确认按钮文本	确定
confirmColor	String	确认按钮文本颜色	#5677fc
cancelText	String	取消按钮文本	取消
cancelColor	String	取消按钮文本颜色	#888
btnSize	[Number, String]	按钮字体大小，单位rpx	32
bold	Boolean	按钮字体是否加粗	true
backgroundColor	String	内容背景色	#fff
color	String	内容字体颜色	#333
size	[Number, String]	picker内容字体大小，单位px	16
maskClosable	Boolean	点击遮罩是否可关闭，为true时触发hide事件	true
params	[Number, String]	自定义参数	0
zIndex V2.9.1+	Number,String	z-index值，注：原生导航栏或tabbar无法遮盖	998

TIP

maskClosable 属性 为true 时，点击遮罩以及取消按钮都会触发hide事件，需在事件中将 show 属性值设置为false以关闭picker选择器。

Events

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

事件名	说明	回调参数
change	当滚动选择，value 改变时触发 change 事件	{textField,valueField,index,result,params}
hide	隐藏选择器，点击取消按钮或遮罩时触发	{ params}
pickstart	当滚动选择开始时候触发事件，仅微信小程序支持 2.3.1	-
pickend	当滚动选择结束时候触发事件，仅微信小程序支持 2.3.1	-

预览

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

特别说明

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

线上程序扫码预览

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