FirstUI UNI版

Picker 选择器 VIP专属

概述

Picker 选择器，用于数据的选择。可联动选择，支持1~4级数据。

# 支持平台

App-vue App-Nvue 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序 H5 PC 快手小程序 钉钉小程序
✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓

温馨提示

一般来说我们会通过 z-index + position 来进行层级的设置，但是 weex （Nvue）不支持 z-index 设置层级关系，默认越靠后的元素层级越高。

# 引入

以下介绍两种常用的引入方式。
第一种：在页面中引用、注册
import fuiPicker from "@/components/firstui/fui-picker/fui-picker.vue"
export default {
	components:{
		fuiPicker
	}
}
1
2
3
4
5
6
第二种：easycom组件规范
传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。easycom将其精简为一步。

First UI easycom配置请查看 快速上手。

如果不了解easycom，可先查看 官网文档 (opens new window)。

# 代码演示

部分示例演示，完整使用请参考示例程序以及文档API。
一级选择

通过 options 属性设置选择器数据，show 属性控制选择器显示隐藏，@change 为确定按钮触发事件，返回选择值，@cancel 为取消按钮或遮罩触发事件，将 show 属性设置为 false。

<fui-picker :options="options" :show="show" @change="change" @cancel="cancel"></fui-picker>
1
data() {
	return {
		show: false,
		options: ['7:00-8:30', '8:30-10:00', '10:00-11:30', '2:00-3:30', '3:30-5:00']
	}
},
methods: {
	change(e) {
		this.show = false
		console.log(e)
	},
	cancel() {
		this.show = false
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
二级选择 - 不联动

通过 layer 属性设置选择器级数， options 属性设置选择器数据，show 属性控制选择器显示隐藏，@change 为确定按钮触发事件，返回选择值，@cancel 为取消按钮或遮罩触发事件，将 show 属性设置为 false。

<fui-picker :layer="2" :options="options" :show="show" @change="change" @cancel="cancel"></fui-picker>
1
data() {
	return {
		show: false,
		options: [
			['2021-11-01', '2021-11-02', '2021-11-03', '2021-11-04', '2021-11-05'],
			['上午', '下午']
		]
	}
},
methods: {
	change(e) {
		this.show = false
		console.log(e)
	},
	cancel() {
		this.show = false
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
二级选择 - 联动

通过 linkage 属性设置选择器是否为联动选择， layer 属性设置选择器级数， options 属性设置选择器数据，show 属性控制选择器显示隐藏，@change 为确定按钮触发事件，返回选择值，@cancel 为取消按钮或遮罩触发事件，将 show 属性设置为 false。

<fui-picker linkage :layer="2" :options="options" :show="show" @change="change" @cancel="cancel"></fui-picker>
1
data() {
	return {
		show: false,
		options:[{
			text: '北京市',
			value: '100000',
			children: [{
				text: '北京市',
				value: '110000'
			}]
		}, {
			text: '广东省',
			value: '440000',
			children: [{
				text: '广州市',
				value: '440100'
			}, {
				text: '韶关市',
				value: '440200'
			}, {
				text: '深圳市',
				value: '440300'
			}, {
				text: '珠海市',
				value: '440400'
			}, {
				text: '汕头市',
				value: '440500'
			}]
		}]
	}
},
methods: {
	change(e) {
		this.show = false
		console.log(e)
	},
	cancel() {
		this.show = false
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

# Slots

插槽名称 说明
default V2.1.0+ 选择器标题部分自定义显示内容

# Props

属性名 类型 说明 默认值 平台差异说明
options Array 选择器数据，具体格式见下方说明 [ ] -
layer Number, String 选择器级数，可选值：1、2、3、4 1 -
show Boolean 是否显示选择器 false -
value Array, String,Number 选择器默认选中的值，text值或集合，仅 layer = 1 时可使用String类型 [ ] -
linkage Boolean 是否为联动选择 false -
fields Array linkage 为 true（联动选择）时，options数据约定属性（字段）名称 ['text', 'value', 'children'] -
radius Boolean 是否显示圆角 false -
height Number, String 选择器内容体高度，单位rpx 520 -
size Number, String 选择器内容字体大小，单位px 16 -
color String 选择器内容字体颜色，传值则默认颜色失效（不建议修改） - -
title String 选择器标题 - -
titleSize Number, String 标题字体大小，单位rpx 28 -
titleColor String 标题字体颜色，传值则默认颜色失效（不建议修改） - -
confirmText String 确认按钮文本 确定 -
confirmColor String 确认按钮文本颜色，传值则默认颜色失效 - -
cancelText String 取消按钮文本 取消 -
cancelColor String 取消按钮文本颜色，传值则默认颜色失效（不建议修改） - -
btnSize Number, String 按钮字体大小，单位rpx 32 -
background String 选择器头部背景色，传值则默认颜色失效（不建议修改） - -
theme String 选择器主题，可选值：light、dark light Nvue端V1.9.5+支持，且Hbuilder x 3.6.7+有效
maskClosable Boolean 点击遮罩是否可关闭，为true时点击触发 @cancel 事件 true -
maskBackground String 遮罩背景色 rgba(0,0,0,.6) -
zIndex Number, String 选择器层级z-index值 1001 Nvue端不支持，默认越靠后的元素层级越高
isClose V1.9.5+ Boolean 点击确定按钮后是否立即关闭弹框，为false时需自行关闭（需要对选择值进行校验时候可使用） true -
param Number, String 自定义参数，通过事件回传 0 -

# Events

事件名 说明 回调参数
@change 点击确认按钮时触发 {
  text:text值或集合
  value:value值或集合
  index:索引集合，
  result:text组合值，
  param:自定义参数
}
@cancel 点击取消按钮或遮罩（maskClosable = true）时触发 {
  param:自定义参数
}

# Methods

通过 ref 属性来注册组件引用信息。注册完成后，我们可以通过this.$refs.XXX访问到对应的组件实例，并调用上面的实例方法。

方法名 说明 传入参数 返回参数
reset 重置选择器选项 - -
open 打开选择器（除了使用属性 show 控制显示隐藏，也可以调用此方法显示） - -
close V1.9.5+ 关闭选择器（除了使用属性 show 控制显示隐藏，也可以调用此方法关闭） - -
/* 
   options Array 选择器数据格式及属性介绍
   
   有两种数据类型，通过属性值 linkage 来确定传入哪种数据格式
*/

=====================================

// 第一种：linkage = false 不联动时

// layer = 1 级数为1时，有两种数据类型

['7:00-8:30', '8:30-10:00', '10:00-11:30', '2:00-3:30', '3:30-5:00']

//或

[
	['7:00-8:30', '8:30-10:00', '10:00-11:30', '2:00-3:30', '3:30-5:00']
]

// layer = 2 级数为2时

[
	['2021-11-01', '2021-11-02', '2021-11-03', '2021-11-04', '2021-11-05'],
	['上午', '下午']
]

//...每一级数据都为字符串数组

=====================================

// 第二种：linkage = true 联动时，数据默认约定的属性值为 
// text（显示文本）、value（值）、children（子级数据），可通过props属性 fields 进行修改

// layer = 1 级数为1时

[{
	text: '北京市',
	value: '100000'
}, {
	text: '广东省',
	value: '440000'
}]

// layer = 2 级数为2时

[{
	text: '北京市',
	value: '100000',
	children: [{
		text: '北京市',
		value: '110000'
	}]
}, {
	text: '广东省',
	value: '440000',
	children: [{
		text: '广州市',
		value: '440100'
	}, {
		text: '韶关市',
		value: '440200'
	}, {
		text: '深圳市',
		value: '440300'
	}, {
		text: '珠海市',
		value: '440400'
	}, {
		text: '汕头市',
		value: '440500'
	}]
}]

//... 3、4级数同理可得

=====================================
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77

示例预览

# 示例代码地址

VIP内容代码请查看订单页下载的组件库示例源码。

# 特别说明

该组件为付费组件，UNI-APP版VIP用户可免费使用 。

开通会员 (opens new window)

Last Updated: 10/17/2023, 6:09:59 PM

← DatePicker 日期时间选择器 →