picker 底部弹起的滚动选择器
收藏我的收藏
收藏基础库 1.0.0 开始支持本组件
从底部弹起的滚动选择器，现支持五种选择器，通过
mode 属性来设置，分别是 selector 普通选择器，multiSelector 多列选择器，time 时间选择器，date 日期选择器，region 省市区选择器，默认是 selector 普通选择器。属性说明
属性名 | 类型 | 默认值 | 必填 | 说明 | 最低支持版本 |
mode | string | "selector" | 否 | 1.0.0 | |
disabled | boolean | false | 否 | 是否禁用 | 1.0.0 |
bindcancel | EventHandle | 无 | 否 | 取消选择收起 picker 时触发 | 1.0.0 |
除了上述通用的属性，对于不同的 mode，picker 拥有不同的属性，见下方：
mode 的合法值
值 | 说明 | 最低支持版本 |
selector | 普通选择器 | 1.0.0 |
multiSelector | 多列选择器 | 1.0.0 |
time | 时间选择器 | 1.0.0 |
date | 日期选择器 | 1.0.0 |
region | 地区选择器 | 1.0.0 |
普通 选择器 mode="selector"
属性名 | 类型 | 默认值 | 说明 | 最低支持版本 |
range | (string | object)[] | [] | mode 为 selector 或 multiSelector 时，range 有效。 | 1.0.0 |
range-key | string | 无 | 当 range 是一个 Array<object> 时，通过 range-key 来指定 object 中 key 的值作为选择器显示内容。 | 1.0.0 |
value | number | 0 | value 的值表示选择了 range 中的第几个（下标从 0 开始）。 | 1.0.0 |
disabled | boolean | false | 是否禁用。 | 1.0.0 |
bindchange | EventHandle | 无 | 确定选择时触发，详见下方说明。 | 1.0.0 |
bindcancel | EventHandle | 无 | 取消选择收起 picker 时触发，详见下方。 | 1.0.0 |
多列选择器 mode="multiSelector"
range 最多支持 5 列数据，超出部分会直接忽略
属性名 | 类型 | 默认值 | 说明 | 最低支持版本 |
range | (string | object)[][] | [] | mode 为 selector 或 multiSelector 时，range 有效。二维数组， 一级数组表示有多少列， 最多 5 列。 | 1.0.0 |
range-key | string | 无 | 同普通选择器。 | 1.0.0 |
value | number[] | [] | 格列选中下标值。 | 1.0.0 |
bindchange | EventHandle | 无 | 确认选择时触发。 | 1.0.0 |
bindcolumnchange | EventHandle | 无 | 某一列的值改变时触发 columnchange 事件，详见下方说明。 | 1.0.0 |
bindcancel | EventHandle | 无 | 取消选择时触发。 | 1.0.0 |
disabled | EventHandle | false | 是否禁用。 | 1.0.0 |
bindcolumnchange 说明
event.detail.column 表示改变了第几列（下标从 0 开始）。event.detail.value value 的值表示变更值的下标 (下标从 0 开始)。时间选择器 mode="time"
属性名 | 类型 | 默认值 | 说明 | 最低支持版本 |
value | string | 无 | 表示选中的时间，格式为 "hh:mm"。 | 1.0.0 |
start | string | 无 | 表示有效时间范围的开始，字符串格式为 "hh:mm"。 | 1.0.0 |
end | string | 无 | 表示有效时间范围的结束，字符串格式为 "hh:mm"。 | 1.0.0 |
disabled | boolean | false | 是否禁用。 | 1.0.0 |
bindchange | EventHandle | 无 | 确认选择时触发。 | 1.0.0 |
bindcancel | EventHandle | 无 | 取消选择时触发。 | 1.0.0 |
日期选择器 mode="date"
属性名 | 类型 | 默认值 | 说明 | 最低支持版本 |
value | string | 无 | 表示选中的日期，格式为"YYYY-MM-DD"。 | 1.0.0 |
start | string | 无 | 表示有效日期范围的开始，字符串格式为"YYYY-MM-DD"。 | 1.0.0 |
end | string | 无 | 表示有效日期范围的结束，字符串格式为"YYYY-MM-DD"。 | 1.0.0 |
fields | "year" | "month" | "day" | "day" | 表示选择器的粒度。 | 1.0.0 |
disabled | boolean | false | 是否禁用。 | 1.0.0 |
bindchange | EventHandle | 无 | 确认选择时触发。 | 1.0.0 |
bindcancel | EventHandle | 无 | 取消选择时触发。 | 1.0.0 |
地区选择器 mode="region"
属性名 | 类型 | 默认值 | 说明 | 最低支持版本 |
value | string[] | 无 | 默认选中每一列的第一个值， 例如 ["北京", "北京市", "西城区"]。 | 1.0.0 |
custom-item | string | 无 | 可为每一列的顶部添加一个自定义的项。 | 1.0.0 |
disabled | boolean | false | 是否禁用。 | 1.0.0 |
bindchange | EventHandle | 无 | 确认选择时触发。 | 1.0.0 |
bindcancel | EventHandle | 无 | 取消选择时触发。 | 1.0.0 |
扫码体验
代码示例
Bug & Tip
无
