Picker 选择器

此选择器有两种弹出模式

1. 一是时间模式，可以配置年，日，月，时，分，秒参数
2. 二是地区模式，可以配置省，市，区参数

提示

由于右侧的演示是通过iframe标签引入的，缺少了手机端运行的相关API，或者因为演示区域太小，或者电脑分别率不够高 ，导致演示可能会有问题，手机端有不会这些问题，请在右上角的”演示”中用手机扫码查看对应的效果。

平台差异说明

基本使用

• 通过mode参数设置为time或者region，区分时间和地区模式。
• 通过v-model双向绑定一个值为布尔值的变量，来打开或者收起picker。

<template>
    <u-picker v-model="show" mode="time"></u-picker>
</template>
<script>
    export default {
        data() {
            return {
                show: false
            }
        }
    }
</script>

设置默认时间或地区

• 如果mode为time，可以通过default-time参数设置打开时的默认时间，格式如”2025-07-02 13:01:00”、”2025-07-02 13:01”
• 如果mode为region，可以通过default-region(Array格式)中文的省市区名称，如：[“河北省”, “秦皇岛市”, “北戴河区”]，或者代号的 省市区，如：[“13”, “1303”, “130304”]。

注意：这些省市区的名称和代码，须是uView的Picker组件自身提供的，否则可能无法匹配

<template>
    <u-picker mode="time" v-model="show"  default-time="2025-07-02 13:01"></u-picker>
    <u-picker mode="region" v-model="show"  :area-code='["13", "1303", "130304"]'></u-picker>
</template>

设置需要显示的参数

• 时间模式时：通过params参数传入一个对象给组件，给需要显示的参数属性置为true，可选的参数有：year、month、day、hour、minute、second。 其中，hour、minute、second值默认为false，其他值默认为true
• 地区模式时：可选的参数有：province、city、area，默认都为true

下方示例时间模式，只会显示年，月，日3个参数可供选择：

<template>
    <u-picker mode="time" v-model="show" :params="params"></u-picker>
</template>
<script>
    export default {
        data() {
            return {
                params: {
                    year: true,
                    month: true,
                    day: true,
                    hour: false,
                    minute: false,
                    second: false
                },
                show: false
            }
        }
    }
</script>

回调参数

当点击picker的”取消”或者”确定”按钮时，会分别产生回调事件cancel和confirm，均为会返回组件内部的当前值。 回调的参数为一个对象，属性和传递给picker组件的params对象为true的属性一致。
注意：mode为region时，回调对象属性为一个对象，分别有label和value属性，见如下说明：

// 组件内部parmas参数默认值：
let params = {
    year: true,
    month: true,
    day: true,
    hour: false,
    minute: false,
    second: false,
    province: true,
    city: true,
    area: true
}
// 如果params值如下(时间选择模式)：：
let params = {
    year: true,
    month: true,
    day: true,
    hour: false,
    minute: false,
    second: false
}
// 那么回调的参数可能如下：
{
    year: '2020',
    month: '05',
    day: '10'
}
// 如果params值如下(地区选择模式)：
let params = {
    province: true,
    city: true,
    area: true
}
// 那么回调的参数可能如下：
{
    area: {
        label: "宝安区",
        value: "440306"
    },
    city: {
        label: "深圳市",
        value: "4403"
    },
    province: {
        label: "广东省",
        value: "44"
    },
}

API

Props

注意：props中没有控制Picker打开与收起的参数，因为这是通过v-model绑定变量实现的，见上方说明。

Events