Picker 选择器
提供多个选项集合供用户选择，支持单列选择、多列选择和级联选择，通常与弹出层组件配合使用。
选项配置
Picker 组件通过 columns 属性配置选项数据，columns 是一个包含字符串或对象的数组。
API
Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| columns | 选项数据，格式为数组，数组的每一项是一个对象，对象可以包含 text 和 value 字段，也可以通过 children 字段实现级联选择 | Array<Option> | [] |
| title | 顶部栏标题 | string | '' |
| confirm-text | 确认按钮文字 | string | '确认' |
| cancel-text | 取消按钮文字 | string | '取消' |
| visible-item-count | 可见的选项个数 | number | 6 |
| swipeable | 是否支持手势滑动切换选项 | boolean | false |
| closeable | 是否显示关闭图标 | boolean | false |
| show-toolbar | 是否显示顶部栏 | boolean | true |
| item-height | 选项高度，支持 px vw vh 单位，默认单位为 px | `string | number` |
| safe-area-inset-bottom | 是否开启底部安全区适配 | boolean | false |
Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| confirm | 点击确认按钮时触发 | { selectedValues, selectedOptions, selectedIndexes } |
| cancel | 点击取消按钮时触发 | { selectedValues, selectedOptions, selectedIndexes } |
| change | 选项变化时触发 | { selectedValues, selectedOptions, selectedIndexes, columnIndex } |
| click-option | 点击选项时触发 | { currentOption, selectedValues, selectedOptions, selectedIndexes, columnIndex } |
| scroll-into | 当用户通过点击或拖拽让一个选项滚动到中间的选择区域时触发 | { currentOption, columnIndex } |
Slots
| 名称 | 说明 | 参数 |
|---|---|---|
| toolbar | 自定义顶部栏 | - |
| title | 自定义标题 | - |
| confirm | 自定义确认按钮 | - |
| cancel | 自定义取消按钮 | - |
| option | 自定义选项 | option: PickerOption, index: number |
| columns-top | 自定义第一列 | - |
| columns-bottom | 自定义第二列 | - |
PickerOption 数据结构
| 键名 | 说明 | 类型 |
|---|---|---|
| text | 选项文字 | string |
| value | 选项值 | `string |
| children | 子选项 | PickerOption[] |
| disabled | 是否禁用该选项 | boolean |
| className | 自定义选项类名 | string |
方法
通过 ref 可以获取到 Picker 实例并调用实例方法，详见组件实例方法。
| 方法名 | 说明 | 参数 | 返回值 |
|---|---|---|---|
| confirm | 触发确认事件 | - | - |
| getSelectedOptions | 获取当前选中项的选项数据 | - | `(PickerOption |