2020-02-02 02:07:00 +08:00
# 穿梭框 Transfer
<!-- single - column -->
左、右、左、右...像我这么无聊的人能玩一整天。
2020-03-07 15:48:49 +08:00
## 演示
2020-02-02 02:07:00 +08:00
```demo
basic
2020-03-03 12:40:05 +08:00
size
2020-02-05 22:20:12 +08:00
filterable
2020-02-02 02:07:00 +08:00
```
2020-10-22 13:42:05 +08:00
<!-- large - data -->
2020-02-02 02:07:00 +08:00
## Props
2020-02-07 23:40:07 +08:00
|名称|类型|默认值|说明|
2020-02-02 02:07:00 +08:00
|-|-|-|-|
|disabled|`boolean`|`true`||
2020-02-05 22:20:12 +08:00
|filterable|`boolean`|`false`||
|filter|`(pattern: string, option: TransferOption, from: 'source' \| 'target') => boolean`|一个简单的标签字符串匹配函数||
2020-10-22 13:42:05 +08:00
|options|`Array< TransferOption > `|`[]`||
2020-03-03 12:40:05 +08:00
|size|`'small' \| 'medium' \| 'large'`|`'medium'`||
2020-10-22 13:42:05 +08:00
|source-filter-placeholder|`string`|`undefined`||
|source-title|`string`|`'源项'`||
|target-filter-placeholder|`string`|`undefined`||
|target-title|`string`|`'目标项'`||
2020-10-23 14:18:35 +08:00
|theme|`'light' \| 'dark' \| string`|`undefined`||
2020-10-22 13:42:05 +08:00
|value|`Array< string \| number > `|`null`||
2020-10-06 03:04:22 +08:00
|on-update:value|`(value: Array< string \| number > ) => any`|`undefined`||
2020-10-22 13:42:05 +08:00
<!-- |virtual-scroll|`boolean`|`false`|If use virtual scroll on transfer. If set to `true` it can handles large data (and turn transfer animation off)| -->
2020-02-02 02:07:00 +08:00
2020-02-05 22:20:12 +08:00
### TransferOption Type
2020-02-07 23:40:07 +08:00
|属性|类型|说明|
2020-02-02 02:07:00 +08:00
|-|-|-|
|label|`string`||
|value|`string \| number`|选项的 value，
2020-02-05 22:20:12 +08:00
|disabled|`boolean`||
2020-02-02 02:07:00 +08:00
2020-10-06 03:04:22 +08:00
<!-- ## 备注
2020-02-02 02:07:00 +08:00
当听到同事和我说他要往里面放上千条数据的时候，我是很蛋疼的。贫瘠的想象让我实在难想出为啥非得用这个东西装这么多数据。但是必须承认，大多数情况下还是我考虑得不太周全。
几个月之前，我给它弄了个好玩的动画，但是它会触发大量 DOM 的回流。那个时候我根本没考虑还会有人往这里怼这么多数据。虽然我的原则是绝不对样式妥协，但是还是很难跨过浏览器和硬件的限制。这感觉都成了个哲学问题，造一辆车和劳斯莱斯一样舒适，还要和法拉利(或者保时捷、其他什么的)一样快几乎不太可能。
（ ， ， ）
2020-10-06 03:04:22 +08:00
样式不能妥协，但问题还得解决，所以最后决定搞个加速开关处理大量数据，想快也可以，不放动画就完了。 -->
