picker 底部弹起的滚动选择器
收藏
我的收藏

基础库 1.0.0 开始支持本组件​
从底部弹起的滚动选择器,现支持五种选择器,通过 mode 属性来设置,分别是 selector 普通选择器multiSelector 多列选择器time 时间选择器date 日期选择器region 省市区选择器,默认是 selector 普通选择器。​

属性说明​

属性名​
类型​
默认值​
必填​
说明​
最低支持版本​
mode​
string​
"selector"​
否​
选择器类型,详见 mode 的合法值。​
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​

无​