From 32db64a3ebdb337fd3df6bcfcfa794edc2feee1c Mon Sep 17 00:00:00 2001
From: ocean-gao <gaopandyx@163.com>
Date: Mon, 11 Nov 2024 18:12:04 +0800
Subject: [PATCH] =?UTF-8?q?feat(Dropdown):=20=E4=B8=8B=E6=8B=89=E9=80=89?=
 =?UTF-8?q?=E9=A1=B9=E5=AE=B9=E5=99=A8=E8=AE=BE=E7=BD=AE=E6=9C=80=E5=A4=A7?=
 =?UTF-8?q?=E9=AB=98=E5=BA=A6=EF=BC=8C=E8=B6=85=E5=87=BA=E6=98=BE=E7=A4=BA?=
 =?UTF-8?q?=E6=BB=9A=E5=8A=A8=E6=9D=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/dropdown/dropdown.tsx              | 12 ++++---
 components/dropdown/style/index.less          |  2 ++
 docs/.vitepress/components/dropdown/check.vue | 36 ++++++++++++++++++-
 docs/.vitepress/components/dropdown/index.md  |  1 +
 4 files changed, 46 insertions(+), 5 deletions(-)

diff --git a/components/dropdown/dropdown.tsx b/components/dropdown/dropdown.tsx
index 5354397b..156f619e 100644
--- a/components/dropdown/dropdown.tsx
+++ b/components/dropdown/dropdown.tsx
@@ -5,6 +5,7 @@ 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');
@@ -12,7 +13,7 @@ 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
index bdc056fe..2965537c 100644
--- 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
index 5cf5b385..ffe2aab8 100644
--- 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
index 5d8570ff..c597c1b6 100644
--- 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