跳到主要内容

选择器 Picker

选择器,提供单列、双列、级联能力。

用法示例

备注

options 字段数据结构:PickerAcronymColumnPickerColomn

单列数据

简易属性模式:

<ti-picker id="ti-picker"></ti-picker>

完整属性模式:

<ti-picker id="ti-picker"></ti-picker>

多列数据

简易属性模式:

<ti-picker id="ti-picker"></ti-picker>

完整属性模式:

<ti-picker id="ti-picker"></ti-picker>

有禁用项

<ti-picker id="ti-picker"></ti-picker>

级联数据

<ti-picker id="ti-picker"></ti-picker>

ti-picker API

属性 Properties

名称类型必填默认值说明备注
optionsPickerColumn[] | PickerColumn[][] | PickerAcronymColumn[] | PickerAcronymColumn[][][]列数据;可以使用该字段实现 PickerColumn 列表, 替换使用 <ti-pickerColumn /> 元素。-
value--
row-aliasnull | number | stringnull当 option 为对象类型时,指定其中某个字段,作为返回值字段;不填则从0自增
use-row-indexbooleanfalse是否使用下标
sportsbooleanfalse跳转指定位置是否带有动画-
cascadebooleanfalse级联-
labelstring'label'当 option 为对象类型时,设置某个字段作为展示字段-
visible-item-countnumber展示项数-
loadingbooleanfalse是否展示加载中-
option-item-heightstring | number108rpx单项高度,单位px-
titlebarbooleantrue是否使用 TiPopupTitlebar 组件-
titlestring''标题文案,透传给 TiPopupTitlebar
sub-titlestring''副标题文案,透传给 TiPopupTitlebar
confirm-textstring确定确认按钮文案,透传给 TiPopupTitlebar
cancel-textstring取消取消按钮文案,透传给 TiPopupTitlebar
ext-stylestring''容器样式-
ext-option-stylestring''子器样式-

Options 字段类型说明

值类型说明备注
PickerColumn[]完整列,单列数组
PickerColumn[][]完整列,双列数组
PickerAcronymColumn[]简易列,单列数组
PickerAcronymColumn[][]简易列,双列数组

事件 Events

名称参数说明备注
changechange | select 事件返回值当前选中项-
reach-topreachTop/reachBottom事件返回值运动到顶-
reach-bottomreachTop/reachBottom事件返回值运动到底-
confirmconfirm/cancel事件返回值title-bar 的确认操作titlebar:true
cancelconfirm/cancel事件返回值title-bar 的取消操作titlebar:true

插槽 Slots

名称说明备注
defaultpicker-column

外部样式类 External Classes

名称说明备注
ext-hairline-class中间线样式-
ext-mask-class蒙层样式-
ext-option-class纵列容器样式-
ext-option-item-class纵列单项样式-
ext-class容器样式-

CSS 变量 CSS Variables

变量默认值说明
--picker-mask-bg-imagelinear-gradient(180deg, rgba(255, 255, 255, 90%), rgba(255, 255, 255, 40%))蒙层区背景色
--picker-loading-bg-colorvar(--neutral-color-9, #ffffff)loading 区背景色
--picker-row-colorvar(--neutral-color-1, #212121)picker-column 组件 --picker-column-row-color
--picker-row-selected-colorvar(--neutral-color-1, #212121)picker-column 组件 --picker-column-row-selected-color
--picker-row-disabled-colorvar(--neutral-color-1, #212121)picker-column 组件 --picker-column-row-disabled-color

ti-picker-column API

属性 Properties

名称类型必填默认值说明备注
col-aliasstring | numbernullPickerColumn 的别名; 多列时有用-
row-aliasstring''当 option 为对象类型时,指定其中某个字段的值,作为返回值中的 value-
valuestring | numbernull默认选中项-
columnsstring[] | number[] | object[][]列数据-
sportsbooleanfalsecolumns 或者 value 发生变化时候是否展示动画-
labelstringlabel当 option 为对象类型时,指定其中某个字段的值,作为展示文案-
use-row-indexbooleanfalse是否使用下标-
ext-stylestring''容器样式-

事件 Events

名称参数说明备注
selectchange | select 事件返回值当前选中项-
reachTopreachTop/reachBottom事件返回值运动到顶时触发-
reachBottomreachTop/reachBottom事件返回值运动到底时触发-

外部样式类 External Classes

名称说明备注
ext-class容器样式----

CSS 变量 CSS Variables

变量默认值说明
--picker-column-row-colorvar(--picker-row-color, var(--neutral-color-1, #212121))文字颜色
--picker-column--row-selected-colorvar(--picker-column-row-selected-color, @picker-row-selected-color)选中文字颜色
--picker-column--row-disabled-colorvar(--picker-column-row-disabled-color, @picker-row-disabled-color)禁用文字颜色

数据结构 Data Structure

列数据结构 PickerColumn

字段类型必填默认值说明
col-aliasstring | number | symbol类型列别名,不填则从0自增
columnPickerAcronymColumn[]类型列数据
idstring默认值id
is-treeboolean默认值是否为树形结构
childrenundefined默认值子数据
column-idstring默认值唯一id
[key: string]unknownlabel展示文案的字段,与 label 字段的值对应

简易模式 / 列数据结构 PickerAcronymColumn

简易模式下,传入的字段同时作为每一项的 key 和 value。

type PickerAcronymColumn = string | { [key: string]: unknown, disabled?: boolean };

change | select 事件返回值

字段类型说明备注
valueunknow类型-
optionsundefined集合
col-indexstring | number列索引
col-aliasstring列别名
row-indexstring | number行索引
row-aliasboolean行别名

reachTop | reachBottom 事件返回值

字段类型说明备注
col-indexstring | number列索引-
row-indexstring | number行索引-
col-aliasstring列别名-

confirm | cancel 事件返回值

字段类型说明备注
valuePickerAcronymColumn | PickerAcronymColumn[] | PickerColumn | PickerColumn[]返回 value 字段-
optionsPickerAcronymColumn | PickerAcronymColumn[] | PickerColumn | PickerColumn[]返回选中的整个 option-