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