Picker 滚轮选择器
移动式滚轮列选择器:原生滚动 + 吸附提供惯性手感,滚动/键盘选中落停后回写 value 并派发 oas-change。支持独立多列(columns)与级联树(options)两种数据形态,form-associated 可直接进原生表单。适合移动端的日期式分栏、地区级联、规格多选等场景。
基础用法
columns 传 JSON 数组(每列 { key?, label?, items: [{ label, value?, disabled? }] }),value 为各列选中值数组(value 缺省回退 label):
独立两列 + 事件反馈
滚动或方向键选择,这里显示 oas-change 反馈。
级联(options 树)
options 传树形 JSON(children 嵌套):列数随选中路径自动派生,父列变更时子列重建并复位到首可用项。columns 与 options 互斥(columns 优先):
省/市级联
切换省份列,城市列自动重建。
禁用项与整件禁用
列内单项 disabled: true:落停到禁用项时自动吸附到最近可用项;整件 disabled 时滚轮不响应:
禁用项吸附 + 整件禁用
档位定制
item-height(行高 px,默认 36)× visible-count(可见行数,默认 5,偶数自动归奇)决定滚轮高度;选中行高亮锚定选中行:
行高 44 + 可见 3 行
原生表单
form-associated:有 name 时 FormData 提交 JSON 数组字符串;form.reset() 回初始值:
oas-form 提交
提交后这里显示表单数据。
触屏与键盘
- 触屏/鼠标:滚轮列原生惯性滚动 + 吸附居中,滚动中实时高亮最近项,落停提交;
- 键盘:列可聚焦(
role="listbox"),↑/↓ 逐项移动、Home/End 跳首/末可用项(跳过禁用项);
API
oas-picker
属性
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
columns | 独立多列数据(JSON 数组 [{ key?, label?, items: [{ label, value?, disabled? }] }];与 options 互斥且优先) | — | — |
disabled | 整件禁用(滚轮不响应、值不变) | boolean | — |
item-height | 行高 px(正整数,非法回落默认) | — | — |
name | 原生表单字段名(form-associated:FormData 提交的键,值为 JSON 数组字符串) | — | — |
options | 级联树数据(JSON [{ label, value?, children: [...] }]);列数随选中路径派生,父列变更重建子列并复位首可用项 | — | — |
required | 必填标记(驱动原生校验链 valueMissing:未选 = 未填) | boolean | — |
value | 各列选中值(JSON 数组,项 value 缺省回退 label);落停回写反射,程序性写入只滚动不派发事件 | string[] | string | — |
visible-count | 可见行数(≥3,偶数自动归奇) | — | — |
事件
| 事件 | 说明 |
|---|---|
oas-change | 滚动/键盘选中落停后派发(程序性 value 写入不派发)。detail { value, labels, columnIndex }——value/labels 为全列当前口径,columnIndex 为本次变更列 |