Merge pull request #906 from WeBankFinTech/feat-dropdown-maxheight

feat(Dropdown): 下拉选项容器设置最大高度，超出显示滚动条，及增加 popperClass 配置项，可自定义弹出框容器样式
WeBankFinTech · Nov 12, 2024 · 2ec3b13 · 2ec3b13
2 parents 6a82f65 + 0499a9a
commit 2ec3b13
Show file tree

Hide file tree

Showing 6 changed files with 72 additions and 21 deletions.
diff --git a/components/dropdown/dropdown.tsx b/components/dropdown/dropdown.tsx
@@ -5,14 +5,15 @@ import getPrefixCls from '../_util/getPrefixCls';
 import { useNormalModel } from '../_util/use/useModel';
 import { useTheme } from '../_theme/useTheme';
 import Popper from '../popper/popper';
+import Scrollbar from '../scrollbar/scrollbar.vue';
 import { type DropdownOption as Option, dropdownProps } from './props';
 
 const prefixCls = getPrefixCls('dropdown');
 
 export default defineComponent({
     name: 'FDropdown',
     props: dropdownProps,
-    emits: ['click', 'visibleChange', 'update:visible'],
+    emits: ['click', 'visibleChange', 'update:visible', 'scroll'],
     setup(props, { slots, emit }) {
         useTheme();
 
@@ -41,8 +42,11 @@ export default defineComponent({
         });
 
         const renderOptions = () => (
-            <div
-                class={[
+            <Scrollbar
+                onScroll={(event: Event) => {
+                    emit('scroll', event);
+                }}
+                containerClass={[
                     `${prefixCls}-option-wrapper`,
                     hasIcon.value ? 'has-icon' : '',
                 ]}
@@ -85,15 +89,15 @@ export default defineComponent({
                         </div>
                     );
                 })}
-            </div>
+            </Scrollbar>
         );
 
         return () => (
             <Popper
                 v-model={visible.value}
                 trigger={props.trigger}
                 placement={props.placement}
-                popperClass={`${prefixCls}-popper`}
+                popperClass={[`${prefixCls}-popper`, props.popperClass]}
                 appendToContainer={props.appendToContainer}
                 getContainer={props.getContainer}
                 offset={props.offset}

diff --git a/components/dropdown/props.ts b/components/dropdown/props.ts
@@ -69,6 +69,7 @@ export const dropdownProps = {
         type: Boolean,
         default: false,
     },
+    popperClass: [String, Array, Object] as PropType<string | [] | object>,
 } as const satisfies ComponentObjectPropsOptions;
 
 export type DropdownProps = ExtractPublicPropTypes<typeof dropdownProps>;
diff --git a/components/dropdown/style/index.less b/components/dropdown/style/index.less
@@ -6,6 +6,7 @@
 @dropdown-option-height: @data-input-height-base;
 @dropdown-option-hover-color: var(--f-hover-color-light);
 @dropdown-min-width: 100px;
+@dropdown-max-height: 274px;
 
 .@{dropdown-prefix-cls} {
     &-popper {
@@ -14,6 +15,7 @@
     }
     &-option-wrapper {
         min-width: @dropdown-min-width;
+        max-height: @dropdown-max-height;
         .text();
         &:not(.has-icon) {
             .@{dropdown-prefix-cls}-option {

diff --git a/docs/.vitepress/components/dropdown/check.vue b/docs/.vitepress/components/dropdown/check.vue
@@ -1,5 +1,5 @@
 <template>
-    <FDropdown arrow :options="options" showSelectedOption>
+    <FDropdown arrow :options="options" showSelectedOption popperClass="dropdown-content-wrapper" @scroll="handleScroll">
         <FButton>下拉菜单</FButton>
     </FDropdown>
 </template>
@@ -29,10 +29,52 @@ export default {
                 value: '5',
                 label: '收藏',
             },
+            {
+                value: '6',
+                label: '点赞',
+            },
+            {
+                value: '7',
+                label: '分享',
+            },
+            {
+                value: '8',
+                label: '投诉',
+            },
+            {
+                value: '9',
+                label: '建议',
+            },
+            {
+                value: '10',
+                label: '更新',
+            },
+            {
+                value: '11',
+                label: '编辑',
+            },
+            {
+                value: '12',
+                label: '更多',
+            },
         ];
+
+        const handleScroll = (e) => {
+            console.log('[dropdown.check] handleScroll, e:', e);
+        };
+
         return {
             options,
+            handleScroll,
         };
     },
 };
 </script>
+
+<style lang="less">
+.dropdown-content-wrapper {
+    .fes-dropdown-option-wrapper {
+        max-height: 320px;
+    }
+}
+</style>
diff --git a/docs/.vitepress/components/dropdown/index.md b/docs/.vitepress/components/dropdown/index.md
@@ -76,13 +76,15 @@ disabled.vue
 | disabled           | 是否禁用                                                                                                                                                   | boolean                 | `false`               |
 | arrow              | 是否显示箭头                                                                                                                                               | boolean                 | `false`               |
 | showSelectedOption | 是否显示选中选项                                                                                                                                           | boolean                 | `false`               |
+| popperClass        | 弹出框容器样式                                                                                                                                             | string                  | -                     |
 
 ## Events
 
-| 事件名称      | 说明                   | 回调参数          |
-| ------------- | ---------------------- | ----------------- |
-| click         | 点击选项的回调         | (value) => void   |
-| visibleChange | 菜单显示状态改变时调用 | (visible) => void |
+| 事件名称      | 说明                   | 回调参数               |
+| ------------- | ---------------------- | ---------------------- |
+| click         | 点击选项的回调         | (value) => void        |
+| visibleChange | 菜单显示状态改变时调用 | (visible: Boolean) => void      |
+| scroll        | 滚动事件               | (event: Event) => void |
 
 ## Slots
 

diff --git a/docs/.vitepress/components/select/index.md b/docs/.vitepress/components/select/index.md
@@ -165,17 +165,17 @@ selectGroupOption.vue
 
 ## Select Events
 
-| 事件名称      | 说明                                                                         | 回调参数           |
-| ------------- | ---------------------------------------------------------------------------- | ------------------ |
-| change        | 选择或者清除选中选项时触发                                                   | 目前选中的值       |
-| visibleChange | 下拉框出现/隐藏时触发, 出现则为 true，隐藏则为 false                         | (visible: Boolean) |
-| removeTag     | 取消选中时调用，参数为选中项的 value (或 key) 值，仅在 `multiple` 模式下生效 | 取消选中的值       |
-| blur          | 当选择器失去焦点时触发                                                       | (event: Event)     |
-| focus         | 当选择器获得焦点时触发                                                       | (event: Event)     |
-| clear         | 点击清除按钮时触发                                                           | (event: Event)     |
-| scroll        | 滚动事件                                                                     | (event: Event)     |
-| search        | 搜索事件                                                                     | ( query: String)   |
-| filter        | 过滤事件                                                                     | ( query: String)   |
+| 事件名称      | 说明                                                                         | 回调参数                   |
+| ------------- | ---------------------------------------------------------------------------- | -------------------------- |
+| change        | 选择或者清除选中选项时触发                                                   | (value) => void            |
+| visibleChange | 下拉框出现/隐藏时触发, 出现则为 true，隐藏则为 false                         | (visible: Boolean) => void |
+| removeTag     | 取消选中时调用，参数为选中项的 value (或 key) 值，仅在 `multiple` 模式下生效 | 取消选中的值               |
+| blur          | 当选择器失去焦点时触发                                                       | (event: Event) => void     |
+| focus         | 当选择器获得焦点时触发                                                       | (event: Event) => void     |
+| clear         | 点击清除按钮时触发                                                           | (event: Event) => void     |
+| scroll        | 滚动事件                                                                     | (event: Event) => void     |
+| search        | 搜索事件                                                                     | ( query: String) => void   |
+| filter        | 过滤事件                                                                     | ( query: String) => void   |
 
 ## Select Slots