Transfer 穿梭框
左右双面板 + 中间穿梭按钮，支持搜索过滤、键盘操作、目标侧拖拽排序与选中即移动模式。
基础用法
基础
面板头显示「已选/可见」计数（如 1/3），随勾选与过滤实时更新。
预置选中值与标题
预置 value + titles
可搜索
searchable
区分大小写搜索
searchable + case-sensitive
单向模式
只能从左向右穿梭，右侧只读；左侧展示全部数据，已穿梭项禁用并显示为已选。
one-way
目标顺序与拖拽排序
target-sort 控制右面板顺序策略：
original（默认）：保持数据源顺序（与data一致）push：新穿梭项追加到尾部unshift：新穿梭项依次插入头部
target-draggable 开启右面板拖拽排序（顺序即业务含义的「已选清单」场景）；触屏（pointer: coarse）与键盘可达的替代通道：行内「上移/下移」按钮（点击移一位），键盘先点选右侧某行 Alt + ↑/↓ 移动其位置。original 模式顺序由数据源决定，拖拽与排序按钮均不生效——需要手动排序时请配 push / unshift。
target-sort=push + target-draggable（行内上移/下移按钮 + 拖拽）
target-sort=unshift（新穿梭项置顶）
选中即移动（simple）
simple 开启后点击行立即穿梭（免中央按钮，触屏友好），中央按钮隐藏；默认关闭，维持「选完点按钮」的主形态。
窄屏（视口 ≤480px）下双面板自动纵向堆叠、穿梭按钮改横排居中，不再保持 180px×2 的刚性宽度；触屏（pointer: coarse）下选项行高与穿梭按钮热区自动抬到 44px。
simple
行自定义（item 插槽）
template[slot="item"] 克隆进每行（静态与虚拟滚动面板一致），[data-item-label] 自动绑定选项文本：
item 插槽（角色图标 + 富文本行）
空态自定义（empty 插槽）
template[slot="empty"] 自定义空态（真空态与搜索无匹配态共用，双侧共用）：
empty 插槽
虚拟滚动
万级数据窗口化渲染，滚动流畅，选中态 / 全选 / 键盘导航保持。
virtual（10000 项，item-height 32）
长列表分页（pagination）
pagination 开启面板内分页（page-size 每页条数，默认 10）：左右面板各自独立翻页，面板底部出现简版页脚（上一页 / 页码 / 下一页，边界自动禁用）。分页作用于搜索过滤之后的可见项；过滤词变化页码重置回第 1 页；面板头计数仍按全量可见统计。虚拟模式自窗口化，两者并存时分页不生效。
pagination + page-size=2
列表滚动事件（oas-scroll）
面板列表滚动时派发 oas-scroll（静态列表与虚拟视口均生效），detail: { side, direction, scrollTop, reachBottom }——懒加载通道：宿主监听 reachBottom 追加数据到 data 即可。
滚动反馈（reachBottom 提示）
禁用
disabled 禁用整组交互（行/全选/搜索/穿梭按钮/键盘），并镜像宿主 data-disabled 供样式消费；disabled-skip 豁免全局禁用注入。
disabled（查看态回显）
事件
变化事件
选中与搜索事件
oas-change：穿梭后值变化，detail: { value }oas-select-change：面板选中集变化（点行 / 全选 / 键盘选中均派发），detail: { side: 'left' | 'right', selected: string[] }oas-search：搜索输入，detail: { side, query }oas-scroll：面板列表滚动，detail: { side, direction: 'up' | 'down', scrollTop, reachBottom }（懒加载通道）
键盘操作
| 按键 | 行为 |
|---|---|
↑ / ↓ | 移动选中（单选语义的导航态） |
Enter | 穿梭当前选中项 |
Space | 切换当前选中项勾选 |
Ctrl/⌘ + A | 全选/全清当前面板可见可选项 |
Alt + ↑/↓ | 右面板排序（target-draggable 的键盘替代，需先选中一行） |
树形数据穿梭（oas-tree 组合示例）
树形 / 表格式穿梭不进组件数据协议，用 oas-tree（勾选）+ transfer（value 联动）组合达成：
部门树选人（oas-tree + transfer 联动）
表格式穿梭（多列信息）同理：宿主用 oas-table 渲染左侧数据，勾选变化时把 key 集合同步给 transfer 的 value。
API
oas-transfer
属性
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
case-sensitive | 搜索区分大小写（默认大小写不敏感） | boolean | — |
data | 数据（JSON attribute 声明式通道，property 赋值单向反射，[{ key, label, disabled }]） | TransferItem[] | string | [] |
disabled | 禁用（行点击/按钮/搜索全部失效；宿主镜像 data-disabled） | boolean | — |
item-height | 虚拟滚动每行固定高度（px），默认 36 | string | — |
one-way | 单向模式：只能左→右移动，右侧只读；左侧展示全部数据，已穿梭项禁用并显示为已选 | boolean | — |
page-size | 每页条数（非法/小于 1 回落 10） | string | 10 |
pagination | 长列表分页：双面板独立翻页 + 简版页脚（作用于过滤后可见项） | boolean | — |
searchable | 面板内搜索过滤（左右各自过滤） | boolean | — |
simple | 选中即移动（免点穿梭按钮，默认关） | boolean | — |
source-title | 左面板标题 | — | — |
target-draggable | 目标侧拖拽排序（需配 target-sort=push/unshift；original 模式顺序由数据源决定不启用） | boolean | — |
target-sort | 目标侧排序：original（默认，按数据源序）/ push（依次入尾）/ unshift（依次插头）。⚠️ 注意 value 数组顺序语义：original 下乱序预置 value 会被归一到数据源序 | string | original |
target-title | 右面板标题 | — | — |
titles | 双面板标题（JSON 数组）或 source-title/target-title | string | — |
value | 已选 key 数组（JSON 属性） | string[] | string | [] |
virtual | 大数据量窗口化渲染（虚拟滚动，行高默认 36px） | boolean | — |
Property（JS property；是否写回 attribute 见各行说明）
| Property | 说明 | 类型 | 默认值 |
|---|---|---|---|
value | 当前值：目标侧 key 数组 | string[] | string | — |
事件
| 事件 | 说明 |
|---|---|
oas-change | 穿梭后值变化，detail: { value } |
oas-scroll | 列表滚动事件，detail: { side, direction, scrollTop, reachBottom }（懒加载通道） |
oas-search | 面板搜索输入，detail: { side, query } |
oas-select-change | 选中集合变化（点行/全选/键盘），detail: { side, selected } |
插槽
| 名称 | 说明 |
|---|---|
template[slot="empty"] | 空态与无匹配共用自定义内容 |
template[slot="item"] | 自定义行（[data-item-label] 绑定，静态+虚拟行一致） |
键盘：聚焦面板列表后 ↑/↓ 移动选中，Enter 穿梭。