Picker 选择器

支持一至四列选择，以及父子数据联动。

支持平台

以下为官网文档所列的平台支持情况，具体功能及版本限制请参见本页的平台说明。

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

基础用法

<!-- 选择器 -->
<fui-picker :show="showPicker" :options="options" @change="handlePickerChange"
  @cancel="showPicker = false" />

页面需声明 showPicker、options 和事件处理方法。单列可传字符串数组；联动数据使用 fields 指定文本、值和子节点字段。

属性

属性	类型	说明	官网默认值
options	Array	选择数据	[]
layer	Number / String	列数，支持 1–4	1
show	Boolean	是否显示	false
value	Array / String / Number	初始选中值，单列可使用字符串	[]
linkage	Boolean	是否启用联动	false
fields	Array	联动数据的文本、值和子节点字段	['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
maskClosable	Boolean	点击遮罩是否触发 cancel	true
maskBackground	String	遮罩颜色	rgba(0,0,0,.6)
zIndex	Number / String	层级，nvue 不支持	1001
isClose	Boolean	确认后是否立即关闭	true
param	Number / String	事件携带的自定义参数	0

事件

事件	说明	回调参数
change	点击确认	{ text, value, index, result, param }
cancel	点击取消按钮或可关闭的遮罩	{ param }

实例支持 reset()、open()、close()；isClose 为 false 时需自行关闭。

插槽和平台说明

默认插槽可自定义标题。nvue 暗色主题支持情况受组件版本及 HBuilderX 版本影响，层级受元素顺序影响。

插槽

插槽	说明
default	选择器标题区域的自定义内容