APIbeta

Picker

Introduce

picker组件内部使用了 widget 组件. 拥有widget的所有属性和方法.

props

widget 所有属性.

名称 类型 是否必须 描述
visible boolean 表示是否显示; 允许使用 visible.sync 进行双向绑定
mask boolean 是否显示遮罩层. (默认为 true)
maskClose boolean 是否点击遮罩层后关闭. (默认为 false)
preventEvent boolean 是否阻止时间传递到遮罩层及以下. (默认为 true)
pageClass String或Array 除遮罩层外的内容层的样式类.
pageStyle String或Array或Object 除遮罩层外的内容层的样式

picker相关属性

名称 类型 是否必须 描述
v-model 或 value string,number或Array 表示当前picker的值;
如果是单列picker则值为string或number
如果列大于1, 则值为数组
cancelBtnText string 表示取消按钮文字 (默认为 取消)
confirmBtnText string 表示确认按钮文字 (默认为 确认)
datasource Array 或 bp.PickerDataSource 数据源对象 数据源
forcePhoneStyle boolean或’true’或’false’ 是否强制显示phone样式
toolbarPos ‘top’或’bottom’ toolbar显示的位置

events

名称 描述
change(selectValue):void 当滑动改变界面上选择时触发, 参数为界面上选择的值. (单组数据源为值, 多组数据源为值数据)
cancel():void 点击取消按钮或hide()隐藏的事件.
confirm(picker:bp.Picker):void 点击确认按钮的事件. (点击确认后, 会将界面上选择的值设置为picker当前的值)

methods

widget的所有方法.

名称 描述
show():Promise 显示
hide():Promise 隐藏
setSelect(groupIndex, value, trigger = false) 设置指定组界面上选择的值; trigger将触发change事件
getSelect(groupIndex = 0) 获得指定组当前界面上所选择的值
getValue() 返回当前picker的值, 单组数据源为值, 多组数据源为值数组
refreshDatasource(groupIndex, trigger = true) 手动刷新指定组的数据源, 将触发数据源对象的picker_datasource方法, trigger将触发change事件

example

示例代码.

See the Pen bp-picker by brainpoint (@brainpoint) on CodePen.

数组数据源.

将自动计算datasource中的children数据, 并使用指定的数据源类型来构造单组,双组或三组类型的数据.

1
var datasource = [{label:'1',value:1}, {label:'2',value:2}, {label:'3',value:3}];
1
2
3
4
5
<bp-picker 
  v-model="value" 
  :visible.sync="visible" 
  :datasource="datasource" 
/>

时间

1
var datasource = new bpui.PickerTimeDatasource({hourText:'时', minuteText:'分'});
1
2
3
4
5
<bp-picker 
  v-model="value" 
  :visible.sync="visible" 
  :datasource="datasource" 
/>

日期

1
var datasource = new bpui.PickerDateDatasource();
1
2
3
4
5
<bp-picker 
  v-model="value" 
  :visible.sync="visible" 
  :datasource="datasource" 
/>

datasource 说明

数据源是一个实现bp.PickerDataSource接口的类实例对象, 可以以异步方式获取数据. 接口如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
type PickerDataSourceValue = string|number;
type PickerDataSourceData = Array<{label:string, value:PickerDataSourceValue}>;

/**
* @desc: picker数据源.
*/
interface PickerDataSource {
  /**
  * @desc: 数据源组的个数.
  * @param callback: 由此回调返回数据源组的个数.
  */
  picker_datasource_groups(callback:(groupsCount:number)=>void):void;

  /**
  * @desc: 返回指定组的数据源
  * @param callback: 由此回调返回指定组的数据, datasource表示数据源, value表示当前选中的值.
  *       {
            datasource: [{label:'', value:0}, ],  // 数据源.
            value:      0,  // 选择的值.
          }
  */
  picker_datasource(groupIndex:number, 
                    picker:Picker, 
                    callback:(ds:{datasource:PickerDataSourceData,value:PickerDataSourceValue})=>void):void;
  
  /**
  * @desc: 当前选中的值改变后.
  */
  picker_changed(groupIndex:number, picker:Picker):void;
}

预实现数据源类

系统内部提供了如下几个预先实现的数据源类:

名称 说明
bp.PickerSingleDatasource 单组数据源
bp.PickerDoubleDatasource 双组数据源, 第二组数据源依赖于第一组数据源的选值 2 > 1
bp.PickerThreeDatasource 三组数据源, 同上, 3 > 2 > 1
bp.PickerTimeDatasource 时间数据源; 提供时和分的选择
bp.PickerDateDatasource 日期数据源; 提供年月日的选择

PickerSingleDatasource构造方法

1
2
3
4
new( datasource: Array<{ 
                      label:string, 
                      value:string|number 
                      }> );

PickerDoubleDatasource构造方法

1
2
3
4
5
new( datasource: Array<{ 
                      label:string, 
                      value:string|number,
                      children?: Array< {label, value} >
                      }> );

PickerThreeDatasource构造方法

1
2
3
4
5
new( datasource: Array<{ 
                      label:string, 
                      value:string|number,
                      children?: Array< {label, value, children?} >
                      }> );

如果直接将 datasource作为属性, 将会自动计算属于1组,2组,3组数据源中哪一个, 并自动构造.

PickerTimeDatasource构造方法

1
2
3
4
5
6
7
8
9
10
new(cfg:{
    /**
    * @desc: 小时显示的文本
    */
    hourText?:string,
    /**
    * @desc: 分钟显示的文本
    */
    minuteText?:string,
  });

PickerDateDatasource构造方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
new(cfg:{
    /**
    * @desc: 年显示的文本
    */
    yearText?:string,
    /**
    * @desc: 月显示的文本
    */
    monthText?:string,
    /**
    * @desc: 日显示的文本
    */
    dateText?:string,
    /**
    * @desc: 年份从哪一年开始
    */
    yearFrom?:number,
    /**
    * @desc: 年份到哪一年结束
    */
    yearTo?:number,
  });

自定义主题

picker样式结构如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
.bp-picker {
  /* 显示状态 */
  &.bp-widget__visible {}
  /* 隐藏状态 */
  &.bp-widget__invisible {}

  /* 除遮罩层外的对话框内容 */
  .bp-widget__content {
    /* wrap层 */
    .bp-widget__contentWrap {

      /* 按钮栏 */
      .bp-picker__toolbar {}

      /* picker区域 */
      .bp-picker__main {
        /* 数据组 */
        .bp-picker__group {}
        .bp-picker__group {}
        .bp-picker__group {
          /* 掩码层, 做事件及渐变 */
          .bp-picker__mask {}
          /* 当前选中 */
          .bp-picker__indicator {}
          /* 列表内容 */
          .bp-picker__content {
            .bp-picker__item {}
            .bp-picker__item {}
            .bp-picker__item {}
            .bp-picker__item {}
          }
        }
      }
    }
  }
}

scss样式文件存放在@bpui/picker/style 目录下, 可以复制修改以定制主题