fix(select): loading 配合触底事件 onScrollToBottom 一起使用的问题

closed #4528
Tencent · Oct 10, 2024 · ca6eedc · ca6eedc
1 parent a970a00
commit ca6eedc
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 13 deletions.
diff --git a/src/select/_example-ts/scroll-bottom.vue b/src/select/_example-ts/scroll-bottom.vue
@@ -3,8 +3,9 @@
     <t-select
       style="width: 300px"
       :options="options"
+      :loading="loading"
       placeholder="请选择"
-      :popup-props="{ onScrollToBottom: handleScrollToBottom }"
+      :popup-props="{ 'on-scroll-to-bottom': handleScrollToBottom }"
     />
   </t-space>
 </template>
@@ -31,11 +32,19 @@ for (let i = 1; i < 15; i++) {
 //   }
 // };
 
+const loading = ref(false);
 // 直接使用滚动触底事件
 const handleScrollToBottom = () => {
-  options.value = options.value.concat({
-    label: `滚动新增选项${options.value.length + 1}`,
-    value: options.value.length + 1,
-  });
+  if (loading.value) {
+    return;
+  }
+  loading.value = true;
+  setTimeout(() => {
+    options.value = options.value.concat({
+      label: `滚动新增选项${options.value.length + 1}`,
+      value: options.value.length + 1,
+    });
+    loading.value = false;
+  }, 500);
 };
 </script>
diff --git a/src/select/_example/scroll-bottom.vue b/src/select/_example/scroll-bottom.vue
@@ -3,8 +3,9 @@
     <t-select
       style="width: 300px"
       :options="options"
+      :loading="loading"
       placeholder="请选择"
-      :popup-props="{ onScrollToBottom: handleScrollToBottom }"
+      :popup-props="{ 'on-scroll-to-bottom': handleScrollToBottom }"
     />
   </t-space>
 </template>
@@ -28,11 +29,19 @@ for (let i = 1; i < 15; i++) {
 //   }
 // };
 
+const loading = ref(false);
 // 直接使用滚动触底事件
-const handleScrollToBottom = () => {
-  options.value = options.value.concat({
-    label: `滚动新增选项${options.value.length + 1}`,
-    value: options.value.length + 1,
-  });
+const handleScrollToBottom = async () => {
+  if (loading.value) {
+    return;
+  }
+  loading.value = true;
+  setTimeout(() => {
+    options.value = options.value.concat({
+      label: `滚动新增选项${options.value.length + 1}`,
+      value: options.value.length + 1,
+    });
+    loading.value = false;
+  }, 500);
 };
 </script>
diff --git a/src/select/select.tsx b/src/select/select.tsx
@@ -284,11 +284,13 @@ export default defineComponent({
     };
 
     const handlerPopupScrollToBottom: PopupProps['onScrollToBottom'] = async (context) => {
-      const { onScrollToBottom } = (props.popupProps || {}) as TdSelectProps['popupProps'];
+      const { popupProps } = props;
       if (props.loading) {
         return;
       }
-      onScrollToBottom?.(context);
+      // @ts-ignore types 中只有 onScrollToBottom，但 Vue 会自动转换 on-scroll-to-bottom 并支持，故此处都进行调用
+      popupProps?.['on-scroll-to-bottom']?.(context);
+      popupProps?.onScrollToBottom?.(context);
     };
 
     const addCache = (val: SelectValue) => {