Skip to content

Commit 696eb7f

Browse files
fengjingxuan8fengjingxuan8
committed
【级联选择器】完善级联选择器API，Demo； 【级联选择器】根据组件2.1交互修改样式
1 parent cb09226 commit 696eb7f

14 files changed

Lines changed: 1222 additions & 436 deletions

File tree

‎src/components/c-cascader/demos/basic.md‎

Lines changed: 27 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -49,32 +49,35 @@ const addressOptions = [
4949
},
5050
];
5151

52-
const defaultOptions = [{
53-
label: '浙江',
54-
value: 'zj',
55-
}, {
56-
label: '杭州',
57-
value: 'hangzhou',
58-
}, {
59-
label: '余杭',
60-
value: 'yuhang',
61-
}];
52+
6253
export default class Demo extends React.Component {
63-
onChange(value) {
64-
console.log(value);
65-
}
66-
filter(inputValue, path) {
67-
return path.some(option => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1);
68-
}
69-
render() {
70-
const defaultValue = defaultOptions.map(o => o.value);
54+
onChange(value) {
55+
console.log(value);
56+
}
57+
58+
filter(inputValue, path) {
59+
return path.some(option => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1);
60+
}
7161

72-
return (
73-
<>
74-
<CCascader options={addressOptions} onChange={this.onChange} placeholder="Please select" showSearch={{filter:this.filter }}/>
62+
render() {
7563

76-
</>
77-
);
78-
}
64+
return (
65+
<div>
66+
<div style={{ marginBottom: 24 }}>仅叶子选项支持选择</div>
67+
<CCascader
68+
options={addressOptions}
69+
onChange={this.onChange}
70+
placeholder="Please select"
71+
showSearch={{filter:this.filter }} />
72+
<div style={{ marginBottom: 24, marginTop: 40 }}>任意选项支持选择</div>
73+
<CCascader
74+
options={addressOptions}
75+
onChange={this.onChange}
76+
placeholder="Please select"
77+
showSearch={{filter:this.filter }}
78+
changeOnSelect/>
79+
</div>
80+
);
81+
}
7982
}
8083
```

‎src/components/c-cascader/demos/clear.md‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
---
2+
order: 1
3+
title: 级联选择器
4+
desc: 清空选中项
5+
---
6+
7+
```jsx
8+
9+
import React from 'react';
10+
import { CCascader } from 'cloud-react';
11+
const addressOptions = [
12+
{
13+
value: 'zhejiang',
14+
label: 'Zhejiang',
15+
16+
17+
children: [
18+
{
19+
value: 'hangzhou',
20+
label: 'Hangzhou',
21+
children: [
22+
{
23+
value: 'xihu',
24+
label: 'West Lake',
25+
},
26+
{
27+
value: 'xiasha',
28+
label: 'Xia Sha',
29+
},
30+
],
31+
},
32+
],
33+
},
34+
{
35+
value: 'jiangsu',
36+
label: 'Jiangsu',
37+
children: [
38+
{
39+
value: 'nanjing',
40+
label: 'Nanjing',
41+
children: [
42+
{
43+
value: 'zhonghuamen',
44+
label: 'Zhong Hua men',
45+
},
46+
],
47+
},
48+
],
49+
},
50+
];
51+
52+
export default function Demo() {
53+
const onChange = value => {
54+
console.log(value);
55+
}
56+
57+
const filter = (inputValue, path) => {
58+
return path.some(option => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1);
59+
}
60+
61+
return (
62+
<CCascader
63+
options={addressOptions}
64+
onChange={onChange}
65+
placeholder="Please select"
66+
showSearch={{ filter: filter }}
67+
allowClear/>
68+
);
69+
}
70+
```

‎src/components/c-cascader/demos/customer-render.md‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
---
2+
order: 1
3+
title: 级联选择器
4+
desc: 支持选择子选项，选中后，仅展示最后一级
5+
---
6+
7+
```jsx
8+
9+
import React from 'react';
10+
import { CCascader } from 'cloud-react';
11+
const addressOptions = [
12+
{
13+
value: 'zhejiang',
14+
label: 'Zhejiang',
15+
16+
17+
children: [
18+
{
19+
value: 'hangzhou',
20+
label: 'Hangzhou',
21+
children: [
22+
{
23+
value: 'xihu',
24+
label: 'West Lake',
25+
},
26+
{
27+
value: 'xiasha',
28+
label: 'Xia Sha',
29+
},
30+
],
31+
},
32+
],
33+
},
34+
{
35+
value: 'jiangsu',
36+
label: 'Jiangsu',
37+
children: [
38+
{
39+
value: 'nanjing',
40+
label: 'Nanjing',
41+
children: [
42+
{
43+
value: 'zhonghuamen',
44+
label: 'Zhong Hua men',
45+
},
46+
],
47+
},
48+
],
49+
},
50+
];
51+
52+
const defaultOptions = [{
53+
label: '浙江',
54+
value: 'zj',
55+
}, {
56+
label: '杭州',
57+
value: 'hangzhou',
58+
}, {
59+
label: '余杭',
60+
value: 'yuhang',
61+
}];
62+
export default function Demo() {
63+
const onChange = value => {
64+
console.log(value);
65+
}
66+
67+
const filter = (inputValue, path) => {
68+
return path.some(option => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1);
69+
}
70+
71+
const displayRender = labels => labels[labels.length - 1];
72+
73+
return (
74+
<CCascader
75+
options={addressOptions}
76+
onChange={onChange}
77+
placeholder="Please select"
78+
displayRender={displayRender}
79+
showSearch={{ filter: filter }}/>
80+
);
81+
}
82+
```

‎src/components/c-cascader/demos/disabled.md‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
---
2+
order: 1
3+
title: 级联选择器
4+
desc: 清空选中项
5+
---
6+
7+
```jsx
8+
9+
import React from 'react';
10+
import { CCascader } from 'cloud-react';
11+
const addressOptions = [
12+
{
13+
value: 'zhejiang',
14+
label: 'Zhejiang',
15+
16+
17+
children: [
18+
{
19+
value: 'hangzhou',
20+
label: 'Hangzhou',
21+
children: [
22+
{
23+
value: 'xihu',
24+
label: 'West Lake',
25+
},
26+
{
27+
value: 'xiasha',
28+
label: 'Xia Sha',
29+
},
30+
],
31+
},
32+
],
33+
},
34+
{
35+
value: 'jiangsu',
36+
label: 'Jiangsu',
37+
children: [
38+
{
39+
value: 'nanjing',
40+
label: 'Nanjing',
41+
children: [
42+
{
43+
value: 'zhonghuamen',
44+
label: 'Zhong Hua men',
45+
},
46+
],
47+
},
48+
],
49+
},
50+
];
51+
52+
export default function Demo() {
53+
const onChange = value => {
54+
console.log(value);
55+
}
56+
57+
return (
58+
<div>
59+
<div style={{ marginBottom: 24 }}>未填写场景</div>
60+
<CCascader
61+
disabled
62+
options={addressOptions}
63+
onChange={onChange}
64+
placeholder="Please select"
65+
allowClear/>
66+
<div style={{ marginBottom: 24, marginTop: 40 }}>已填写场景</div>
67+
<CCascader
68+
disabled
69+
options={addressOptions}
70+
value={["jiangsu"]}
71+
placeholder="Please select"
72+
changeOnSelect/>
73+
</div>
74+
75+
);
76+
}
77+
```

‎src/components/c-cascader/demos/dynamic.md‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
---
2+
order: 1
3+
title: 级联选择器
4+
desc: 异步加载子项目，自定义加载图标
5+
---
6+
7+
```jsx
8+
9+
import React, { useState } from 'react';
10+
import { CCascader, Icon } from 'cloud-react';
11+
const addressOptions = [
12+
{
13+
value: 'zhejiang',
14+
label: 'Zhejiang',
15+
isLeaf: false,
16+
},
17+
{
18+
value: 'jiangsu',
19+
label: 'Jiangsu',
20+
isLeaf: false,
21+
},
22+
];
23+
const children = {
24+
'zhejiang': [
25+
{
26+
value: 'hangzhou',
27+
label: 'Hangzhou',
28+
},
29+
{
30+
value: 'xihu',
31+
label: 'West Lake',
32+
},
33+
{
34+
value: 'xiasha',
35+
label: 'Xia Sha',
36+
},
37+
],
38+
'jiangsu': [
39+
{
40+
value: 'nanjing',
41+
label: 'Nanjing',
42+
},
43+
]
44+
}
45+
export default function Demo() {
46+
const [options, setOptions] = useState(addressOptions);
47+
const onChange = value => {
48+
console.log(value);
49+
}
50+
51+
const filter = (inputValue, path) => {
52+
return path.some(option => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1);
53+
}
54+
55+
const loadData = selectedOptions => {
56+
const targetOption = selectedOptions[selectedOptions.length - 1];
57+
targetOption.loading = true;
58+
// 动态加载下级数据
59+
setTimeout(() => {
60+
targetOption.children = children[targetOption.value];
61+
62+
setOptions([...options]);
63+
64+
targetOption.loading = false;
65+
}, 1000);
66+
};
67+
68+
return (
69+
<div>
70+
<div style={{ marginBottom: 24 }}>异步加载</div>
71+
<CCascader
72+
options={options}
73+
onChange={onChange}
74+
placeholder="Please select"
75+
showSearch={{ filter: filter }}
76+
loadData={loadData}
77+
/>
78+
<div style={{ marginBottom: 24, marginTop: 40 }}>异步加载，修改加载图标</div>
79+
<CCascader
80+
options={options}
81+
onChange={onChange}
82+
placeholder="Please select"
83+
showSearch={{ filter: filter }}
84+
loadData={loadData}
85+
loadingIcon={<Icon type='refresh' />}
86+
/>
87+
</div>
88+
);
89+
}
90+
```

0 commit comments

Comments
 (0)