Picker 选择器

Picker 选择器 显示一个或多个选项集合的的可滚动列表,相比较于原生picker实现了ios跟android端体验一致

何时使用

  • 提供一组或多组关联选项供用户选择
  • 当少于5个选项时,建议直接将选项平铺,使用 Radio 是更好的选择

注意事项

  • Picker、CascaderPicker暂不支持动态改变Column列数

代码示例

基本使用

级联Picker

属性

Picker

type PickerColumnItem = string | number | {
label: string
value: string|number
}

属性类型必填说明默认值
valuePickerColumnItem | (PickerColumnItem)[]选中数据-
dataPickerColumnItem数组picker 数据,配置每一列的选项[]
placeholderstring提示文案'请选择'
disabledboolean是否禁用false
titlestring弹出框标题-
okTextstring确认按钮文案'确定'
dismissTextstring取消文案'取消'
maskClosablebooleanfalse点击蒙层是否可以关闭
maskStylestring蒙层的样式-
maskClassstring蒙层的类名-
indicatorStylestring选中框样式-
indicatorClassstring选中框的类名-
classNamestring类名-

CascaderPicker

interface ICascaderOption {
label: string;
value: any;
children?: ICascaderOption[];
}

属性类型必填说明默认值
valueany[]选中数据-
optionsICascaderOption[]picker 数据[]
placeholderstring提示文案'请选择'
disabledboolean是否禁用false
titlestring弹出框标题-
okTextstring确认按钮文案'确定'
dismissTextstring取消文案'取消'
maskClosablebooleanfalse点击蒙层是否可以关闭
maskStylestring蒙层的样式-
maskClassstring蒙层的类名-
indicatorStylestring选中框样式-
indicatorClassstring选中框的类名-
classNamestring类名-

事件

Picker

事件名说明类型
onOk点击确定按钮,触发回调(value: PickerColumnItem, column: PickerColumnItem, event: Event) => void
onDismiss点击取消按钮/蒙层,触发回调(event: Event) => void
onChange选中项发生变化,触发回调(value: PickerColumnItem, column: PickerColumnItem, event: Event) => void
onFormat选中值的文本显示格式(value: PickerColumnItem, column: PickerColumnItem) => string
onTriggerPicker弹出框显示/隐藏状态变化触发(visible:boolean, event: Event) => void
onBeforeOk点击确认按钮之前,触发回调,返回false时阻止默认确定流程(value: PickerColumnItem, column: PickerColumnItem, event: Event) => boolean

CascaderPicker

事件名说明类型
onOk点击确定按钮,触发回调(value: any[], selectedOptions: ICascaderOption[], event: Event) => void
onDismiss点击取消按钮/蒙层,触发回调(event: Event) => void
onChange选中项发生变化,触发回调(value: any[], selectedOptions: ICascaderOption[], event: Event) => void
onFormat选中值的文本显示格式,默认展示labels.join('')(value: any[], selectedOptions: ICascaderOption[]) => string
onTriggerPicker弹出框显示/隐藏状态变化触发(visible:boolean, event: Event) => void
onBeforeOk点击确认按钮之前,触发回调,返回false时阻止默认确定流程(value: any[], selectedOptions: ICascaderOption[], event: Event) => boolean

插槽

名称说明类型
default文本区域标签名称作用域插槽,接收选中的value参数
title弹窗窗体标题名称-

样式类

类名说明
amd-picker文本展示区域样式
amd-picker-placeholderplaceholder样式
amd-picker-popup弹窗整体样式
amd-picker-header弹窗头部区域样式
amd-picker-header-item弹窗头部区域文本样式
amd-picker-content选择区域样式
amd-picker-content-item选择区域单个选项样式
amd-cascader级联整体区域样式