Skip to content

Commit 987ab91

Browse files
tangjinzhoutangjinzhou
committed
2 parents 116cc6a + 8afa00b commit 987ab91

30 files changed

+1814
-5
lines changed

‎components/index.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -151,3 +151,5 @@ const TimelineItem = Timeline.Item
151151
export { Timeline, TimelineItem }
152152

153153
export { default as InputNumber } from './input-number'
154+
155+
export { default as Transfer } from './transfer'

‎components/input-number/demo/index.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ const md = {
1313
## 何时使用
1414
当需要获取标准数值时。
1515
## 代码演示`,
16-
us: `# Data Entry
16+
us: `# InputNumber
1717
Enter a number within certain range with the mouse or keyboard.
1818
## When To Use
1919
When a numeric value needs to be provided.

‎components/style.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,3 +39,4 @@ import './table/style'
3939
import './progress/style'
4040
import './timeline/style'
4141
import './input-number/style'
42+
import './transfer/style'

‎components/transfer/demo/advanced.md

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
<cn>
2+
#### 高级用法
3+
穿梭框高级用法，可配置操作文案，可定制宽高，可对底部进行自定义渲染。
4+
</cn>
5+
6+
<us>
7+
#### Advanced
8+
You can customize the labels of the transfer buttons, the width and height of the columns, and what should be displayed in the footer.
9+
</us>
10+
11+
```html
12+
<template>
13+
<a-transfer
14+
:dataSource="mockData"
15+
showSearch
16+
:listStyle="{
17+
width: '250px',
18+
height: '300px',
19+
}"
20+
:operations="['to right', 'to left']"
21+
:targetKeys="targetKeys"
22+
@change="handleChange"
23+
:render="item=>`${item.title}-${item.description}`"
24+
>
25+
<a-button
26+
size="small"
27+
style="float:right;margin: 5px"
28+
@click="getMock"
29+
slot="footer"
30+
slot-scope="props"
31+
>
32+
reload
33+
</a-button>
34+
<span
35+
slot="notFoundContent"
36+
>
37+
没数据
38+
</span>
39+
</a-transfer>
40+
</template>
41+
<script>
42+
export default {
43+
data () {
44+
return {
45+
mockData: [],
46+
targetKeys: [],
47+
}
48+
},
49+
mounted() {
50+
this.getMock()
51+
},
52+
methods: {
53+
getMock() {
54+
const targetKeys = [];
55+
const mockData = [];
56+
for (let i = 0; i < 20; i++) {
57+
const data = {
58+
key: i.toString(),
59+
title: `content${i + 1}`,
60+
description: `description of content${i + 1}`,
61+
chosen: Math.random() * 2 > 1,
62+
};
63+
if (data.chosen) {
64+
targetKeys.push(data.key);
65+
}
66+
mockData.push(data);
67+
}
68+
this.mockData = mockData
69+
this.targetKeys = targetKeys
70+
},
71+
handleChange(targetKeys, direction, moveKeys) {
72+
console.log(targetKeys, direction, moveKeys);
73+
this.targetKeys = targetKeys
74+
},
75+
},
76+
}
77+
</script>
78+
```
79+
80+
81+

‎components/transfer/demo/basic.md

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
<cn>
2+
#### 基本用法
3+
最基本的用法，展示了 `dataSource`、`targetKeys`、每行的渲染函数 `render` 以及回调函数 `change` `selectChange` `scroll` 的用法。
4+
</cn>
5+
6+
<us>
7+
#### Basic
8+
The most basic usage of `Transfer` involves providing the source data and target keys arrays, plus the rendering and some callback functions.
9+
</us>
10+
11+
```html
12+
<template>
13+
<a-transfer
14+
:dataSource="mockData"
15+
:titles="['Source', 'Target']"
16+
:targetKeys="targetKeys"
17+
:selectedKeys="selectedKeys"
18+
@change="handleChange"
19+
@selectChange="handleSelectChange"
20+
@scroll="handleScroll"
21+
:render="item=>item.title"
22+
>
23+
</a-transfer>
24+
</template>
25+
<script>
26+
export default {
27+
data () {
28+
const mockData = [];
29+
for (let i = 0; i < 20; i++) {
30+
mockData.push({
31+
key: i.toString(),
32+
title: `content${i + 1}`,
33+
description: `description of content${i + 1}`,
34+
disabled: i % 3 < 1,
35+
});
36+
}
37+
38+
const targetKeys = mockData
39+
.filter(item => +item.key % 3 > 1)
40+
.map(item => item.key);
41+
return {
42+
mockData,
43+
targetKeys,
44+
selectedKeys: ['1', '4'],
45+
}
46+
},
47+
methods: {
48+
handleChange(nextTargetKeys, direction, moveKeys) {
49+
this.targetKeys = nextTargetKeys
50+
51+
console.log('targetKeys: ', this.targetKeys);
52+
console.log('direction: ', direction);
53+
console.log('moveKeys: ', moveKeys);
54+
},
55+
handleSelectChange(sourceSelectedKeys, targetSelectedKeys) {
56+
this.selectedKeys = [...sourceSelectedKeys, ...targetSelectedKeys]
57+
58+
console.log('sourceSelectedKeys: ', sourceSelectedKeys);
59+
console.log('targetSelectedKeys: ', targetSelectedKeys);
60+
},
61+
handleScroll(direction, e) {
62+
console.log('direction:', direction);
63+
console.log('target:', e.target);
64+
},
65+
},
66+
}
67+
</script>
68+
```
69+

‎components/transfer/demo/custom-item.md

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
<cn>
2+
#### 自定义渲染行数据
3+
自定义渲染每一个 Transfer Item，可用于渲染复杂数据。
4+
</cn>
5+
6+
<us>
7+
#### Custom datasource
8+
Custom each Transfer Item, and in this way you can render a complex datasource.
9+
</us>
10+
11+
```html
12+
<template>
13+
<a-transfer
14+
:dataSource="mockData"
15+
:listStyle="{
16+
width: '300px',
17+
height: '300px',
18+
}"
19+
:targetKeys="targetKeys"
20+
@change="handleChange"
21+
:render="renderItem"
22+
>
23+
</a-transfer>
24+
</template>
25+
<script>
26+
export default {
27+
data () {
28+
return {
29+
mockData: [],
30+
targetKeys: [],
31+
}
32+
},
33+
mounted() {
34+
this.getMock()
35+
},
36+
methods: {
37+
getMock() {
38+
const targetKeys = [];
39+
const mockData = [];
40+
for (let i = 0; i < 20; i++) {
41+
const data = {
42+
key: i.toString(),
43+
title: `content${i + 1}`,
44+
description: `description of content${i + 1}`,
45+
chosen: Math.random() * 2 > 1,
46+
};
47+
if (data.chosen) {
48+
targetKeys.push(data.key);
49+
}
50+
mockData.push(data);
51+
}
52+
this.mockData = mockData
53+
this.targetKeys = targetKeys
54+
},
55+
renderItem(item) {
56+
const customLabel = (
57+
<span className="custom-item">
58+
{item.title} - {item.description}
59+
</span>
60+
);
61+
62+
return {
63+
label: customLabel, // for displayed item
64+
value: item.title, // for title and filter matching
65+
};
66+
},
67+
handleChange(targetKeys, direction, moveKeys) {
68+
console.log(targetKeys, direction, moveKeys);
69+
this.targetKeys = targetKeys
70+
},
71+
},
72+
}
73+
</script>
74+
```
75+
76+
77+

‎components/transfer/demo/index.vue

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
<script>
2+
import Basic from './basic.md'
3+
import Search from './search.md'
4+
import Advanced from './advanced.md'
5+
import CustomItem from './custom-item.md'
6+
import LargeData from './large-data.md'
7+
import CN from '../index.zh-CN.md'
8+
import US from '../index.en-US.md'
9+
10+
const md = {
11+
cn: `# 穿梭框
12+
双栏穿梭选择框。
13+
## 何时使用
14+
用直观的方式在两栏中移动元素，完成选择行为。
15+
16+
选择一个或以上的选项后，点击对应的方向键，可以把选中的选项移动到另一栏。
17+
其中，左边一栏为 'source'，右边一栏为 'target'，API 的设计也反映了这两个概念。。
18+
## 代码演示`,
19+
us: `# Transfer
20+
Transfer the elements between two columns in an intuitive and efficient way.
21+
22+
One or more elements can be selected from either column, one click on the proper 'direction' button, and the transfer is done. The left column is considered the 'source' and the right column is considered the 'target'. As you can see in the API description, these names are reflected in.
23+
## Examples
24+
`,
25+
}
26+
export default {
27+
category: 'Components',
28+
subtitle: '穿梭框',
29+
type: 'Data Entry',
30+
title: 'Transfer',
31+
cols: '1',
32+
render () {
33+
return (
34+
<div>
35+
<md cn={md.cn} us={md.us}/>
36+
<br/>
37+
<Basic />
38+
<br/>
39+
<Search />
40+
<br />
41+
<Advanced />
42+
<br/>
43+
<CustomItem />
44+
<br/>
45+
<LargeData />
46+
<br/>
47+
<api>
48+
<template slot='cn'>
49+
<CN/>
50+
</template>
51+
<US/>
52+
</api>
53+
</div>
54+
)
55+
},
56+
}
57+
</script>

‎components/transfer/demo/large-data.md

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
<cn>
2+
#### 大数据性能测试
3+
2000 条数据。
4+
</cn>
5+
6+
<us>
7+
#### Performance Test
8+
2000 items.
9+
</us>
10+
11+
```html
12+
<template>
13+
<a-transfer
14+
:dataSource="mockData"
15+
:targetKeys="targetKeys"
16+
@change="handleChange"
17+
:render="item=>item.title"
18+
>
19+
</a-transfer>
20+
</template>
21+
<script>
22+
export default {
23+
data () {
24+
return {
25+
mockData: [],
26+
targetKeys: [],
27+
}
28+
},
29+
mounted() {
30+
this.getMock()
31+
},
32+
methods: {
33+
getMock() {
34+
const targetKeys = [];
35+
const mockData = [];
36+
for (let i = 0; i < 2000; i++) {
37+
const data = {
38+
key: i.toString(),
39+
title: `content${i + 1}`,
40+
description: `description of content${i + 1}`,
41+
chosen: Math.random() * 2 > 1,
42+
};
43+
if (data.chosen) {
44+
targetKeys.push(data.key);
45+
}
46+
mockData.push(data);
47+
}
48+
this.mockData = mockData
49+
this.targetKeys = targetKeys
50+
},
51+
handleChange(targetKeys, direction, moveKeys) {
52+
console.log(targetKeys, direction, moveKeys);
53+
this.targetKeys = targetKeys
54+
},
55+
},
56+
}
57+
</script>
58+
```
59+
60+

0 commit comments

Comments
 (0)