feat(Dropdown): 下拉选项容器设置最大高度，超出显示滚动条

WeBankFinTech · Nov 11, 2024 · 32db64a · 32db64a
1 parent 6a82f65
commit 32db64a
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 5 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,7 +89,7 @@ export default defineComponent({
                         </div>
                     );
                 })}
-            </div>
+            </Scrollbar>
         );
 
         return () => (

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 @scroll="handleScroll">
         <FButton>下拉菜单</FButton>
     </FDropdown>
 </template>
@@ -29,9 +29,43 @@ 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,
         };
     },
 };

diff --git a/docs/.vitepress/components/dropdown/index.md b/docs/.vitepress/components/dropdown/index.md
@@ -83,6 +83,7 @@ disabled.vue
 | ------------- | ---------------------- | ----------------- |
 | click         | 点击选项的回调         | (value) => void   |
 | visibleChange | 菜单显示状态改变时调用 | (visible) => void |
+| scroll        | 滚动事件               | (event: Event)    |
 
 ## Slots