Picker 选择器
Picker 选择器 显示一个或多个选项集合的的可滚动列表,相比较于原生picker实现了ios跟android端体验一致
何时使用
- 提供一组或多组关联选项供用户选择
- 当少于5个选项时,建议直接将选项平铺,使用 Radio 是更好的选择
注意事项
- Picker、CascaderPicker暂不支持动态改变Column列数
代码示例
基本使用
属性
Picker
type PickerColumnItem = string | number | {
label: string
value: string|number
}
属性 | 类型 | 必填 | 说明 | 默认值 |
---|
value | PickerColumnItem | (PickerColumnItem)[] | 否 | 选中数据 | - |
data | PickerColumnItem数组 | 是 | picker 数据,配置每一列的选项 | [] |
placeholder | string | 否 | 提示文案 | '请选择' |
disabled | boolean | 否 | 是否禁用 | false |
title | string | 否 | 弹出框标题 | - |
okText | string | 否 | 确认按钮文案 | '确定' |
dismissText | string | 否 | 取消文案 | '取消' |
maskClosable | boolean | 否 | false | 点击蒙层是否可以关闭 |
maskStyle | string | 否 | 蒙层的样式 | - |
maskClass | string | 否 | 蒙层的类名 | - |
indicatorStyle | string | 否 | 选中框样式 | - |
indicatorClass | string | 否 | 选中框的类名 | - |
className | string | 否 | 类名 | - |
CascaderPicker
interface ICascaderOption {
label: string;
value: any;
children?: ICascaderOption[];
}
属性 | 类型 | 必填 | 说明 | 默认值 |
---|
value | any[] | 否 | 选中数据 | - |
options | ICascaderOption[] | 是 | picker 数据 | [] |
placeholder | string | 否 | 提示文案 | '请选择' |
disabled | boolean | 否 | 是否禁用 | false |
title | string | 否 | 弹出框标题 | - |
okText | string | 否 | 确认按钮文案 | '确定' |
dismissText | string | 否 | 取消文案 | '取消' |
maskClosable | boolean | 否 | false | 点击蒙层是否可以关闭 |
maskStyle | string | 否 | 蒙层的样式 | - |
maskClass | string | 否 | 蒙层的类名 | - |
indicatorStyle | string | 否 | 选中框样式 | - |
indicatorClass | string | 否 | 选中框的类名 | - |
className | string | 否 | 类名 | - |
事件
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-placeholder | placeholder样式 |
amd-picker-popup | 弹窗整体样式 |
amd-picker-header | 弹窗头部区域样式 |
amd-picker-header-item | 弹窗头部区域文本样式 |
amd-picker-content | 选择区域样式 |
amd-picker-content-item | 选择区域单个选项样式 |
amd-cascader | 级联整体区域样式 |