安装

tnpm install --save @alipay/adc-picker

组件介绍

能力中心小程序选择器组件，支持多列（单列），级联选择，满足业务需求。

参数说明

属性 | 必填 | 参数类型 | 参数说明 | 默认值 | 示例 --|:--:|:--:|:--:|:--: | :-: showToolbar | 否 | boolean | 是否显示头部 | true | true title | 否 | string | 头部标题 | 标题 | 标题 cancelText | 否 | string | 头部取消按钮标题 | 取消 | 取消 confirmText | 否 | string | 头部确定按钮标题 | 确定 | 确定 defaultType | 是 | string | 级联选择器必填，每列要显示的属性名 | text | text mode | 是| string | 区分选择器的类型，设置为level为级联选择器，设置selector为单列（多列选择器） | selector | selector value | 是 | array | 选择器的value值 | [] | ["周三", "下午", "7点"] options | 是 | array | 选择器备选项列表 | [] | [] onCancel | 否 | Function | 点击头部取消按钮触发 | null | ()=>{} onConfirm | 否 | Function | 点击头部确定按钮出发 | null | ()=>{} onChange | 否 | Function | 改变选项时触发 | null | ()=>{}

在小程序中使用

{
  "usingComponents": {
    "mas-adc-picker": "@alipay/adc-picker/es/index"
  }
}

在 page.axml 中引用组件

<!-- 页面使用方式 -->
<mas-adc-picker
  confirmText="{{confirmText}}"
  cancelText="{{cancelText}}"
  showToolbar="{{showToolbar}}"
  toolbarPosition="{{ toolbarPosition }}"
  title="title"
  mode="{{mode}}"
  value="{{value}}"
  defaultType="text"
  options="{{options}}"
  onConfirm="onConfirm"
  onChange="onChange"
  onCancel="onCancel">
</mas-adc-picker>

Badges