Skip to content

Commit 3fe68a5

Browse files
author
liyuan-meng
committed
✨[Select]下拉组件支持设置弹出位置
1 parent 0713269 commit 3fe68a5

5 files changed

Lines changed: 64 additions & 54 deletions

File tree

‎src/components/select/demos/position.md‎

Lines changed: 41 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,6 @@ desc: 可对选项进行搜索
55
---
66

77
```jsx
8-
/**
9-
* title: 模糊搜索
10-
* desc: 可对选项进行搜索
11-
*/
128
import React from 'react';
139
import { Select } from 'cloud-react';
1410

@@ -26,35 +22,7 @@ const dataList = [
2622
{
2723
label: 'Angular',
2824
value: 'Angular',
29-
},
30-
{
31-
label: '数云',
32-
value: 'sy',
33-
},
34-
{
35-
label: '选中项1',
36-
value: '1',
37-
},
38-
{
39-
label: '选中项2',
40-
value: '2',
41-
},
42-
{
43-
label: '选中项3选中项3选中项3选中项3选中项3选中项3选中项3选中项3选中项3选中项3选中项3选中项3选中项3',
44-
value: '3',
45-
},
46-
{
47-
label: '选中项4',
48-
value: '4',
49-
},
50-
{
51-
label: '选中项5',
52-
value: '5',
53-
},
54-
{
55-
label: '选中项6',
56-
value: '6',
57-
},
25+
}
5826
];
5927

6028
export default function SelectDemo() {
@@ -69,18 +37,51 @@ export default function SelectDemo() {
6937
return (
7038
<div style={{ display: 'flex', gap: 20, flexDirection: 'column' }}>
7139
<div>
72-
<h5>上</h5>
40+
<h5>上左</h5>
41+
<Select
42+
allowClear
43+
onSearch={handleSearch}
44+
onChange={handleChange}
45+
style={{width: 260}}
46+
dataSource={dataList}
47+
position="top"
48+
dropdownStyle={{ width: 200 }}
49+
/>
50+
</div>
51+
<div>
52+
<h5>上右</h5>
53+
<Select
54+
allowClear
55+
onSearch={handleSearch}
56+
onChange={handleChange}
57+
style={{width: 260}}
58+
dataSource={dataList}
59+
position="top"
60+
dropdownStyle={{ width: 200, right: 0 }}
61+
/>
62+
</div>
63+
<div>
64+
<h5>下左</h5>
65+
<Select
66+
allowClear
67+
onSearch={handleSearch}
68+
onChange={handleChange}
69+
style={{width: 260}}
70+
dataSource={dataList}
71+
position="bottom"
72+
dropdownStyle={{ width: 200 }}
73+
/>
74+
</div>
75+
<div>
76+
<h5>下右</h5>
7377
<Select
74-
searchable
7578
allowClear
76-
supportLightText
77-
placeholder="带搜索的下拉单选"
7879
onSearch={handleSearch}
7980
onChange={handleChange}
80-
style={{width: 200}}
81+
style={{width: 260}}
8182
dataSource={dataList}
82-
position="auto"
83-
// size="large"
83+
position="bottom"
84+
dropdownStyle={{ width: 200, right: 0 }}
8485
/>
8586
</div>
8687
</div>

‎src/components/select/demos/searchable.md‎

Lines changed: 5 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,6 @@ desc: 可对选项进行搜索
55
---
66

77
```jsx
8-
/**
9-
* title: 模糊搜索
10-
* desc: 可对选项进行搜索
11-
*/
128
import React from 'react';
139
import { Select } from 'cloud-react';
1410

@@ -77,7 +73,7 @@ export default function SelectDemo() {
7773
placeholder="带搜索的下拉单选"
7874
onSearch={handleSearch}
7975
onChange={handleChange}
80-
style={{width: 200}}
76+
style={{width: 260}}
8177
dataSource={dataList}
8278
position="auto"
8379
// size="large"
@@ -94,7 +90,7 @@ export default function SelectDemo() {
9490
placeholder="带搜索的下拉单选"
9591
onSearch={handleSearch}
9692
onChange={handleChange}
97-
style={{width: 200}}
93+
style={{width: 260}}
9894
dataSource={dataList}
9995
// size="large"
10096
/>
@@ -109,7 +105,7 @@ export default function SelectDemo() {
109105
placeholder="带搜索的下拉单选"
110106
onSearch={handleSearch}
111107
onChange={handleChange}
112-
style={{width: 200}}
108+
style={{width: 260}}
113109
dataSource={dataList}
114110
// size="large"
115111
/>
@@ -126,7 +122,7 @@ export default function SelectDemo() {
126122
placeholder="带搜索的下拉多选"
127123
onSearch={handleSearch}
128124
onChange={handleChange}
129-
style={{width: 200}}
125+
style={{width: 260}}
130126
dataSource={dataList}
131127
/>
132128
</div>
@@ -142,7 +138,7 @@ export default function SelectDemo() {
142138
placeholder="带搜索的下拉多选"
143139
onSearch={handleSearch}
144140
onChange={handleChange}
145-
style={{width: 200}}
141+
style={{width: 260}}
146142
dataSource={dataList}
147143
maxTagCount={1}
148144
/>

‎src/components/select/index.js‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -289,7 +289,7 @@ class Select extends Component {
289289
optionsNodeStyle: { height: optionsHeight },
290290
} = this;
291291
const isBottomDistanceEnough = bottom + optionsHeight < this.document.documentElement.clientHeight;
292-
const isLocationTop = optionsHeight < top && !isBottomDistanceEnough && position === 'auto';
292+
const isLocationTop = position === 'top' || optionsHeight < top && !isBottomDistanceEnough && position === 'auto';
293293
if (isAppendToBody) {
294294
this.setState({
295295
style: {
@@ -536,6 +536,8 @@ class Select extends Component {
536536
allowClear,
537537
style,
538538
className,
539+
dropdownStyle,
540+
dropdownClassName,
539541
isAppendToBody,
540542
isSupportTitle,
541543
size,
@@ -552,9 +554,9 @@ class Select extends Component {
552554

553555
const optionContainer = open ? (
554556
<div
555-
className={`${selector}-option-container`}
557+
className={`${selector}-option-container ${dropdownClassName}`}
556558
ref={this.optionsNode}
557-
style={{ ...popupStyle, width: `${width}px` }}
559+
style={{ ...popupStyle, width: `${width}px`, ...dropdownStyle }}
558560
>
559561
{this.renderOptions()}
560562
</div>
@@ -635,6 +637,9 @@ Select.propTypes = {
635637
supportUnlimited: PropTypes.bool,
636638
unlimitedLabel: PropTypes.string,
637639
maxTagCount: PropTypes.number,
640+
dropdownStyle: PropTypes.object,
641+
dropdownClassName: PropTypes.string,
642+
position: PropTypes.oneOf(['top', 'bottom', 'auto']),
638643
};
639644

640645
Select.defaultProps = {
@@ -674,6 +679,9 @@ Select.defaultProps = {
674679
supportUnlimited: false,
675680
unlimitedLabel: '不限',
676681
maxTagCount: undefined,
682+
dropdownStyle: {},
683+
dropdownClassName: '',
684+
position: 'bottom',
677685
};
678686

679687
export default Select;

‎src/components/select/index.less‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -289,9 +289,12 @@
289289
display: none;
290290
position: absolute;
291291
right: 0;
292+
background: white;
293+
z-index: 1;
294+
margin-right: 1px;
295+
width: 25px;
292296
font-size: @dropdown-icon-size;
293297
color: @dropdown-icon-color;
294-
margin-right: 10px;
295298
transition: transform 0.3s;
296299

297300
&.show {

‎src/components/select/index.md‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ group:
5555
| showArrow | 下拉 icon 是否显示 | boolean | true |
5656
| showSelectStyle | 选择器样式是否显示 | boolean | true |
5757
| isAppendToBody | 下拉框是否渲染在 body 上 | boolean | false | |
58-
| position | 下拉框是否启用自动定位，如需使用可设置为`auto` | string | - |
58+
| position | 下拉框定位：`top` `bottom` `auto`（是否启用自动定位，如需使用可设置为`auto`） | string | `bottom` |
5959
| onChange | 选中 option 变化时回调此函数，普通单选树回调包含第三个参数返回当前点击选项的原始数据，如不使用 dataSource 生成组件，则需手动指定 option 的 item 属性 | function(value, oldValue) | - |
6060
| onOk | 多选时确认操作回调函数 | function(value: array, oldValue: array) | - |
6161
| onCancel | 多选时取消操作回调函数 | function | - |
@@ -68,6 +68,8 @@ group:
6868
| lightTextColor | 高亮关键字颜色 | string | #0055CC |
6969
| supportUnlimited | 多选下拉是否支持不限 | boolean | false |
7070
| unlimitedLabel | 修改"不限"文本 | string | 不限 |
71+
| dropdownClassName | 下拉框类名 | string | - |
72+
| dropdownStyle | 下拉框样式 | object | {} |
7173

7274
### Option Props
7375

0 commit comments

Comments
 (0)