Skip to content

Commit 2ec3b13

Browse files
zym19960704zym19960704
authored
Merge pull request #906 from WeBankFinTech/feat-dropdown-maxheight
feat(Dropdown): 下拉选项容器设置最大高度，超出显示滚动条，及增加 popperClass 配置项，可自定义弹出框容器样式
2 parents 6a82f65 + 0499a9a commit 2ec3b13

File tree

6 files changed

+72
-21
lines changed

6 files changed

+72
-21
lines changed

‎components/dropdown/dropdown.tsx

+9-5
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,15 @@ import getPrefixCls from '../_util/getPrefixCls';
55
import { useNormalModel } from '../_util/use/useModel';
66
import { useTheme } from '../_theme/useTheme';
77
import Popper from '../popper/popper';
8+
import Scrollbar from '../scrollbar/scrollbar.vue';
89
import { type DropdownOption as Option, dropdownProps } from './props';
910

1011
const prefixCls = getPrefixCls('dropdown');
1112

1213
export default defineComponent({
1314
name: 'FDropdown',
1415
props: dropdownProps,
15-
emits: ['click', 'visibleChange', 'update:visible'],
16+
emits: ['click', 'visibleChange', 'update:visible', 'scroll'],
1617
setup(props, { slots, emit }) {
1718
useTheme();
1819

@@ -41,8 +42,11 @@ export default defineComponent({
4142
});
4243

4344
const renderOptions = () => (
44-
<div
45-
class={[
45+
<Scrollbar
46+
onScroll={(event: Event) => {
47+
emit('scroll', event);
48+
}}
49+
containerClass={[
4650
`${prefixCls}-option-wrapper`,
4751
hasIcon.value ? 'has-icon' : '',
4852
]}
@@ -85,15 +89,15 @@ export default defineComponent({
8589
</div>
8690
);
8791
})}
88-
</div>
92+
</Scrollbar>
8993
);
9094

9195
return () => (
9296
<Popper
9397
v-model={visible.value}
9498
trigger={props.trigger}
9599
placement={props.placement}
96-
popperClass={`${prefixCls}-popper`}
100+
popperClass={[`${prefixCls}-popper`, props.popperClass]}
97101
appendToContainer={props.appendToContainer}
98102
getContainer={props.getContainer}
99103
offset={props.offset}

‎components/dropdown/props.ts

+1
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,7 @@ export const dropdownProps = {
6969
type: Boolean,
7070
default: false,
7171
},
72+
popperClass: [String, Array, Object] as PropType<string | [] | object>,
7273
} as const satisfies ComponentObjectPropsOptions;
7374

7475
export type DropdownProps = ExtractPublicPropTypes<typeof dropdownProps>;

‎components/dropdown/style/index.less

+2
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
@dropdown-option-height: @data-input-height-base;
77
@dropdown-option-hover-color: var(--f-hover-color-light);
88
@dropdown-min-width: 100px;
9+
@dropdown-max-height: 274px;
910

1011
.@{dropdown-prefix-cls} {
1112
&-popper {
@@ -14,6 +15,7 @@
1415
}
1516
&-option-wrapper {
1617
min-width: @dropdown-min-width;
18+
max-height: @dropdown-max-height;
1719
.text();
1820
&:not(.has-icon) {
1921
.@{dropdown-prefix-cls}-option {

‎docs/.vitepress/components/dropdown/check.vue

+43-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<FDropdown arrow :options="options" showSelectedOption>
2+
<FDropdown arrow :options="options" showSelectedOption popperClass="dropdown-content-wrapper" @scroll="handleScroll">
33
<FButton>下拉菜单</FButton>
44
</FDropdown>
55
</template>
@@ -29,10 +29,52 @@ export default {
2929
value: '5',
3030
label: '收藏',
3131
},
32+
{
33+
value: '6',
34+
label: '点赞',
35+
},
36+
{
37+
value: '7',
38+
label: '分享',
39+
},
40+
{
41+
value: '8',
42+
label: '投诉',
43+
},
44+
{
45+
value: '9',
46+
label: '建议',
47+
},
48+
{
49+
value: '10',
50+
label: '更新',
51+
},
52+
{
53+
value: '11',
54+
label: '编辑',
55+
},
56+
{
57+
value: '12',
58+
label: '更多',
59+
},
3260
];
61+
62+
const handleScroll = (e) => {
63+
console.log('[dropdown.check] handleScroll, e:', e);
64+
};
65+
3366
return {
3467
options,
68+
handleScroll,
3569
};
3670
},
3771
};
3872
</script>
73+
74+
<style lang="less">
75+
.dropdown-content-wrapper {
76+
.fes-dropdown-option-wrapper {
77+
max-height: 320px;
78+
}
79+
}
80+
</style>

‎docs/.vitepress/components/dropdown/index.md

+6-4
Original file line numberDiff line numberDiff line change
@@ -76,13 +76,15 @@ disabled.vue
7676
| disabled | 是否禁用 | boolean | `false` |
7777
| arrow | 是否显示箭头 | boolean | `false` |
7878
| showSelectedOption | 是否显示选中选项 | boolean | `false` |
79+
| popperClass | 弹出框容器样式 | string | - |
7980

8081
## Events
8182

82-
| 事件名称 | 说明 | 回调参数 |
83-
| ------------- | ---------------------- | ----------------- |
84-
| click | 点击选项的回调 | (value) => void |
85-
| visibleChange | 菜单显示状态改变时调用 | (visible) => void |
83+
| 事件名称 | 说明 | 回调参数 |
84+
| ------------- | ---------------------- | ---------------------- |
85+
| click | 点击选项的回调 | (value) => void |
86+
| visibleChange | 菜单显示状态改变时调用 | (visible: Boolean) => void |
87+
| scroll | 滚动事件 | (event: Event) => void |
8688

8789
## Slots
8890

‎docs/.vitepress/components/select/index.md

+11-11
Original file line numberDiff line numberDiff line change
@@ -165,17 +165,17 @@ selectGroupOption.vue
165165

166166
## Select Events
167167

168-
| 事件名称 | 说明 | 回调参数 |
169-
| ------------- | ---------------------------------------------------------------------------- | ------------------ |
170-
| change | 选择或者清除选中选项时触发 | 目前选中的值 |
171-
| visibleChange | 下拉框出现/隐藏时触发, 出现则为 true，隐藏则为 false | (visible: Boolean) |
172-
| removeTag | 取消选中时调用，参数为选中项的 value (或 key) 值，仅在 `multiple` 模式下生效 | 取消选中的值 |
173-
| blur | 当选择器失去焦点时触发 | (event: Event) |
174-
| focus | 当选择器获得焦点时触发 | (event: Event) |
175-
| clear | 点击清除按钮时触发 | (event: Event) |
176-
| scroll | 滚动事件 | (event: Event) |
177-
| search | 搜索事件 | ( query: String) |
178-
| filter | 过滤事件 | ( query: String) |
168+
| 事件名称 | 说明 | 回调参数 |
169+
| ------------- | ---------------------------------------------------------------------------- | -------------------------- |
170+
| change | 选择或者清除选中选项时触发 | (value) => void |
171+
| visibleChange | 下拉框出现/隐藏时触发, 出现则为 true，隐藏则为 false | (visible: Boolean) => void |
172+
| removeTag | 取消选中时调用，参数为选中项的 value (或 key) 值，仅在 `multiple` 模式下生效 | 取消选中的值 |
173+
| blur | 当选择器失去焦点时触发 | (event: Event) => void |
174+
| focus | 当选择器获得焦点时触发 | (event: Event) => void |
175+
| clear | 点击清除按钮时触发 | (event: Event) => void |
176+
| scroll | 滚动事件 | (event: Event) => void |
177+
| search | 搜索事件 | ( query: String) => void |
178+
| filter | 过滤事件 | ( query: String) => void |
179179

180180
## Select Slots
181181

0 commit comments

Comments
 (0)