base-picker

更新时间：2024-09-18 14:46:35

基础库1.1.0开始支持,低版本需做兼容处理

开发者工具1.22.0开始支持

从底部弹起的滚动选择器。
对于不同的mode，picker拥有不同的属性。

属性

属性	类型	默认值	必填	说明
name	string		否	在表单中的字段名
mode	'selector' | 'multiSelector' | 'time' | 'date' | 'region'	'selector'	否	选择器类型
disabled	boolean	false	否	是否禁用
bindcancel	(e: { detail: Record<string, unknown> } & Event) => void		否	取消选择时触发

mode

选择器类型

值	说明
'selector'	普通选择器
'multiSelector'	多列选择器
'time'	时间选择器
'date'	日期选择器
'region'	省市区选择器

扫码体验

示例代码

selector-picker

普通选择器：mode = selector

属性

属性	类型	默认值	必填	说明
name	string		否	在表单中的字段名
disabled	boolean	false	否	是否禁用
bindcancel	(e: { detail: Record<string, unknown> } & Event) => void		否	取消选择时触发
mode	'selector'		是	选择器类型
range	(string | Record<string, string>)[]	[]	否	mode 为 selector 或 multiSelector 时，range 有效
range-key	string		否	当 range 是一个 Object Array 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容
value	number	0	否	表示选择了 range 中的第几个（下标从 0 开始）
bindchange	(e: { detail: { value: number } } & Event) => void		否	value 改变时触发 change 事件，event.detail = {value}

multi-selector-picker

多列选择器：mode = multiSelector

属性

属性	类型	默认值	必填	说明
name	string		否	在表单中的字段名
disabled	boolean	false	否	是否禁用
bindcancel	(e: { detail: Record<string, unknown> } & Event) => void		否	取消选择时触发
mode	'multiSelector'		是	选择器类型
range	(string | Record<string, string>)[][]	[]	否	mode 为 selector 或 multiSelector 时，range 有效
range-key	string		否	当 range 是一个 Object Array 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容
value	number[]	[]	否	表示选择了 range 中的第几个（下标从 0 开始）
bindchange	(e: { detail: { value: number[] } } & Event) => void		否	value 改变时触发 change 事件，event.detail = {value}
bindcolumnchange	(e: { detail: { value: number, column: number } } & Event) => void		否	列改变时触发

time-picker

时间选择器：mode = time

属性

属性	类型	默认值	必填	说明
name	string		否	在表单中的字段名
disabled	boolean	false	否	是否禁用
bindcancel	(e: { detail: Record<string, unknown> } & Event) => void		否	取消选择时触发
mode	'time'		是	选择器类型
value	string		否	表示选中的时间，格式为"hh:mm"
start	string		否	表示有效时间范围的开始，字符串格式为"hh:mm"
end	string		否	表示有效时间范围的结束，字符串格式为"hh:mm"
bindchange	(e: { detail: { value: string, changedIndex: number } } & Event) => void		否	value 改变时触发 change 事件，event.detail = {value}

date-picker

时间选择器：mode = date

属性

属性	类型	默认值	必填	说明
name	string		否	在表单中的字段名
disabled	boolean	false	否	是否禁用
bindcancel	(e: { detail: Record<string, unknown> } & Event) => void		否	取消选择时触发
mode	'date'		是	选择器类型
value	string		否	表示选中的日期，格式为"YYYY-MM-DD"
start	string		否	表示有效日期范围的开始，字符串格式为"YYYY-MM-DD"
end	string		否	表示有效日期范围的结束，字符串格式为"YYYY-MM-DD"
fields	'day' | 'month' | 'year'	'day'	否	有效值 year,month,day，表示选择器的粒度
bindchange	(e: { detail: { value: string, changedIndex: number } } & Event) => void		否	value 改变时触发 change 事件，event.detail = {value}

fields

有效值 year,month,day，表示选择器的粒度

值	说明
'day'	选择器粒度为天
'month'	选择器粒度为月份
'year'	选择器粒度为年

region-picker

省市区选择器：mode = region

属性

属性	类型	默认值	必填	说明
name	string		否	在表单中的字段名
disabled	boolean	false	否	是否禁用
bindcancel	(e: { detail: Record<string, unknown> } & Event) => void		否	取消选择时触发
mode	'region'		是	选择器类型
value	string[]	[]	否	表示选中的省市区，默认选中每一列的第一个值
custom-item	string		否	可为每一列的顶部添加一个自定义的项
bindchange	(e: { detail: { value: string[], code: string[], postcode: string } } & Event) => void		否	value 改变时触发 change 事件，event.detail = {value, code, postcode}，其中字段 code 是统计用区划代码，postcode 是邮政编码