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

支持平台

App（vue）	App（nvue）	H5	小程序
✓	✓	✓	✓

代码演示

部分示例演示，完整使用请参考文档API。

一级选择

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

 <wui-picker
        :layer="layer"
        :options="items"
        :linkage="linkage"
        :show="show"
        @change="change"
        @cancel="cancel"
>
</wui-picker>

const show = ref<any>(false);
const options = ref<any>([
    '7:00-8:30',
    '8:30-10:00',
    '10:00-11:30',
    '2:00-3:30',
    '3:30-5:00',
]);
const change = (e)=> {
    show.value = false
    console.log(e)
}
const cancel = ()=> {
    show.value = false
}

二级选择 - 不联动

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

<wui-picker :layer="2" :options="options" :show="show" @change="onChange" @cancel="cancel"></wui-picker>

const options = ref([
    ['2023-05-01', '2023-05-02', '2023-05-03', '2023-05-04', '2023-05-05'],
    ['上午', '下午'],
]);
const onChange = e => {
    console.log(e);
    result.value = JSON.stringify(e || {});
};
const cancel = () => {
    show.value = false;
};

二级选择 - 联动

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

<wui-picker linkage :layer="2" :options="options" :show="show" @change="onChange" @cancel="cancel"></wui-picker>

const options = ref([
    {
        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',
            },
        ],
    },
]);
const onChange = e => {
    console.log(e);
    result.value = JSON.stringify(e || {});
};
const cancel = () => {
    show.value = false;
};

Slots

插槽名称	说明
-	-

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	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	关闭选择器（除了使用属性 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级数同理可得

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