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 array
[]
mode为 selector 或 multiSelector 时，range 有效。二维数组，长度表示多少列，数组的每项表示每列的数据，如[["a","b"], ["c","d"]]
 
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 →