From 8ba3bf5abd797686672a2158179b924916813b7d Mon Sep 17 00:00:00 2001
From: seepine <93666053+seepine@users.noreply.github.com>
Date: Fri, 22 Sep 2023 14:08:42 +0800
Subject: [PATCH] feat(auto-complete): add dropdown scroll event (#2635)

---
 .../components/auto-complete/README.en-US.md  |  7 ++-
 .../components/auto-complete/README.zh-CN.md  |  7 ++-
 .../auto-complete/__demo__/scroll.md          | 52 +++++++++++++++++++
 .../auto-complete/auto-complete.tsx           | 24 +++++++++
 4 files changed, 86 insertions(+), 4 deletions(-)
 create mode 100644 packages/web-vue/components/auto-complete/__demo__/scroll.md

diff --git a/packages/web-vue/components/auto-complete/README.en-US.md b/packages/web-vue/components/auto-complete/README.en-US.md
index f5a700f85..896e301a6 100644
--- a/packages/web-vue/components/auto-complete/README.en-US.md
+++ b/packages/web-vue/components/auto-complete/README.en-US.md
@@ -14,6 +14,8 @@ description: The auto-complete function of the input.
 
 @import ./__demo__/footer.md
 
+@import ./__demo__/scroll.md
+
 ## API
 
 
@@ -39,6 +41,9 @@ description: The auto-complete function of the input.
 |search|Emitted when the user searches|value: `string`||
 |select|Emitted when an option is selected|value: `string`||
 |clear|Triggered when the user clicks the clear button|ev: `Event`|2.23.0|
+|dropdown-scroll|Triggered when the drop-down scrolls|ev: `Event`|2.51.0|
+|dropdown-reach-bottom|Triggered when the drop-down menu is scrolled to the bottom|ev: `Event`|2.51.0|
+
 ### `<auto-complete>` Methods
 
 |Method|Description|Parameters|Return|version|
@@ -51,5 +56,3 @@ description: The auto-complete function of the input.
 |---|---|---|:---|
 |option|Display content of options|data: `OptionInfo`|2.13.0|
 |footer|The footer of the popup menu box|-||
-
-
diff --git a/packages/web-vue/components/auto-complete/README.zh-CN.md b/packages/web-vue/components/auto-complete/README.zh-CN.md
index 700dd2650..60ed2d911 100644
--- a/packages/web-vue/components/auto-complete/README.zh-CN.md
+++ b/packages/web-vue/components/auto-complete/README.zh-CN.md
@@ -12,6 +12,8 @@ description: 输入框的自动补全功能。
 
 @import ./__demo__/footer.md
 
+@import ./__demo__/scroll.md
+
 ## API
 
 
@@ -37,6 +39,9 @@ description: 输入框的自动补全功能。
 |search|用户搜索时触发|value: `string`||
 |select|选择选项时触发|value: `string`||
 |clear|用户点击清除按钮时触发|ev: `Event`|2.23.0|
+|dropdown-scroll|下拉菜单发生滚动时触发|ev: `Event`|2.51.0|
+|dropdown-reach-bottom|下拉菜单滚动到底部时触发|ev: `Event`|2.51.0|
+
 ### `<auto-complete>` Methods
 
 |方法名|描述|参数|返回值|版本|
@@ -49,5 +54,3 @@ description: 输入框的自动补全功能。
 |---|:---:|---|:---|
 |option|选项内容|data: `OptionInfo`|2.13.0|
 |footer|弹出框的页脚|-||
-
-
diff --git a/packages/web-vue/components/auto-complete/__demo__/scroll.md b/packages/web-vue/components/auto-complete/__demo__/scroll.md
new file mode 100644
index 000000000..4796a6318
--- /dev/null
+++ b/packages/web-vue/components/auto-complete/__demo__/scroll.md
@@ -0,0 +1,52 @@
+```yaml
+title:
+  zh-CN: 下拉菜单滚动
+  en-US: Dropdown Scroll
+```
+
+## zh-CN
+
+可以通过 `dropdown-scroll` 监听下拉菜单的滚动事件。或者通过 `dropdown-reach-bottom` 监听下拉菜单滚动到底部的事件。
+
+---
+
+## en-US
+
+You can monitor the scroll event of the drop-down menu through `dropdown-scroll`. Or use `dropdown-reach-bottom` to monitor the event of the drop-down menu scrolling to the bottom.
+
+---
+
+```vue
+<template>
+  <a-auto-complete
+    :data="data"
+    :style="{ width: '360px' }"
+    placeholder="please enter something"
+    @dropdown-scroll="handleScroll"
+    @dropdown-reach-bottom="handleReachBottom"
+  />
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+    const data = ref([...Array(100)].map((_, index) => `option-${index}`))
+
+    const handleScroll = (ev) => {
+      console.log('scroll', ev)
+    }
+    const handleReachBottom = (ev) => {
+      console.log('reach the bottom', ev)
+    }
+
+    return {
+      data,
+      handleScroll,
+      handleReachBottom
+    }
+  },
+}
+</script>
+```
diff --git a/packages/web-vue/components/auto-complete/auto-complete.tsx b/packages/web-vue/components/auto-complete/auto-complete.tsx
index 716ac6f74..c80ca35fb 100644
--- a/packages/web-vue/components/auto-complete/auto-complete.tsx
+++ b/packages/web-vue/components/auto-complete/auto-complete.tsx
@@ -144,6 +144,20 @@ export default defineComponent({
      * @version 2.23.0
      */
     'clear': (ev: Event) => true,
+    /**
+     * @zh 下拉菜单发生滚动时触发
+     * @en Triggered when the drop-down scrolls
+     * @param {Event} ev
+     * @version 2.51.0
+     */
+    'dropdownScroll': (ev: Event) => true,
+    /**
+     * @zh 下拉菜单滚动到底部时触发
+     * @en Triggered when the drop-down menu is scrolled to the bottom
+     * @param {Event} ev
+     * @version 2.51.0
+     */
+    'dropdownReachBottom': (ev: Event) => true,
   },
   /**
    * @zh 弹出框的页脚
@@ -240,6 +254,14 @@ export default defineComponent({
       handleChange(value);
     };
 
+    const handleDropdownScroll = (e: Event) => {
+      emit('dropdownScroll', e);
+    };
+
+    const handleDropdownReachBottom = (e: Event) => {
+      emit('dropdownReachBottom', e);
+    };
+
     const { validOptions, optionInfoMap, validOptionInfos, handleKeyDown } =
       useSelect({
         options: data,
@@ -308,6 +330,8 @@ export default defineComponent({
             'footer': slots.footer,
           }}
           virtualList={Boolean(props.virtualListProps)}
+          onScroll={handleDropdownScroll}
+          onReachBottom={handleDropdownReachBottom}
         />
       );
     };