bilibili小程序

使用小贴士

picker

从底部弹起的滚动选择器。

属性类型默认值说明版本
modestringselector选择器类型 
disabledbooleanfalse是否禁用 
canceleventhandleselector取消选择时触发 

mode 的合法值

值说明
selector普通选择器
multiSelector多列选择器
time时间选择器
date日期选择器
region省市区选择器


除了上述通用的属性，对于不同的mode，picker拥有不同的属性。

普通选择器：mode = selector

属性类型默认值说明版本
range
array/object
[]
mode为 selector 或 multiSelector 时，range 有效
 
range-keystring当 range 是一个 object array 时，通过 range-key 来指定 object 中 key 的值作为选择器显示内容 
valuenumber0value 的值表示选择了 range 中的第几个（下标从 0 开始） 
changeeventhandlevalue 改变时触发 change 事件，event.detail = {value: value} 

多列选择器：mode = multiSelector

属性类型默认值说明版本
range
array/object
[]
mode为 selector 或 multiSelector 时，range 有效
 
range-keystring当 range 是一个 二维object array 时，通过 range-key 来指定 object 中 key 的值作为选择器显示内容 
valuearray[]value 每一项的值表示选择了 range 对应项中的第几个（下标从 0 开始） 
changeeventhandlevalue 改变时触发 change 事件，event.detail = {value: value} 
columnchangeeventhandle某一列的值改变时触发 columnchange 事件，event.detail = {column: column, value: value}，column 的值表示改变了第几列（下标从0开始），value 的值表示变更值的下标 

时间选择器：mode = time

属性类型默认值说明版本
valuestring表示选中的时间，格式为"hh:mm" 
startstring表示有效时间范围的开始，字符串格式为"hh:mm" 
endstring表示有效时间范围的结束，字符串格式为"hh:mm" 
changeeventhandlevalue 改变时触发 change 事件，event.detail = {value: value} 

日期选择器：mode = date

属性类型默认值说明版本
valuestring0表示选中的日期，格式为"YYYY-MM-DD" 
startstring表示有效日期范围的开始，字符串格式为"YYYY-MM-DD" 
endstring表示有效日期范围的结束，字符串格式为"YYYY-MM-DD" 
fieldsstringday有效值 year,month,day，表示选择器的粒度 
changeeventhandlevalue 改变时触发 change 事件，event.detail = {value: value} 

fields 有效值：

值说明
year选择器粒度为年
month选择器粒度为月份
day选择器粒度为天

省市区选择器：mode = region

属性类型默认值说明版本
value
array
[]
表示选中的省市区，默认选中每一列的第一个值
custom-itemstring'全部'可为每一列的顶部添加一个自定义的项
changeeventhandlevalue 改变时触发 change 事件，event.detail = {value: value, code: code, postcode: postcode}，其中字段code是统计用区划代码，postcode是邮政编码

Bug & Tip

  1. iOS 端（<3.82.0）在显示 Picker 的状态下更新 range，会自动重新显示

示例代码

<template>
    <div>
        <picker
            mode="region"
            :value="value"
            :custom-item="customItem"
            @change="change"
            @cancel="cancel"
        >
            <div class="button">打开picker</div>
        </picker>
    </div>
</template>

<script>

export default {
    data() {
        return {
            value: [],
            customItem: ''
        };
    },
    methods: {
        change(e) {
            console.log('change', e);
            this.value = e.detail.value;
        },
        cancel() {
            console.log('cancel');
        }
    }
};
</script>

<style lang="less">
.button {
  width: 100px;
  height: 50px;
  background: #ff5687;
  color: white;
  text-align: center;
  line-height: 50px;
  margin: 20px 0 0 20px;
}
</style>
← labelb-slider →