ThorUI文档

# 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>

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


items__1: [{
	text: "中国",
	value: "1001"
}, {
	text: "美国",
	value: "1002"
}, {
	text: "俄罗斯",
	value: "1003"
}]
二级数据

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

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

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

items__2: [{
	text: '广东省',
	value: '100',
	children: [{
		text: '广州市',
		value: '10001'
	}, {
		text: '深圳市',
		value: '10002'
	}]
}, {
	text: '安徽省',
	value: '200',
	children: [{
		text: '合肥市',
		value: '20001'
	}, {
		text: '安庆市',
		value: '20002'
	}]
}]

注：数据格式约定的属性为：text，value，children，其余属性可自行扩展。

# Slots

名称 说明
- -

# Props

参数 类型 说明 默认值
layer [Number, String] 数据层级 1
pickerData Array data数据，目前只支持一次性传入所有数据 [ ]
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

# Events

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

# 预览

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

# 线上程序扫码预览

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

← tui-form 表单 →