feat(select): select组件增加下拉框滚动到底部事件 (#1719)

* feat(select): select组件增加下拉框滚动到底部事件 * feat(select): demo补充 --------- Co-authored-by: GreatZP <greatzp@greatzp.cn>
DevCloudFE · Sep 1, 2023 · 077d03a · 077d03a
1 parent b0e1d77
commit 077d03a
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 4 deletions.
diff --git a/packages/devui-vue/devui/select/src/select.tsx b/packages/devui-vue/devui/select/src/select.tsx
@@ -9,6 +9,8 @@ import {
   onBeforeMount,
   Teleport,
   withModifiers,
+  onMounted,
+  nextTick,
 } from 'vue';
 import type { SetupContext } from 'vue';
 import useSelect from './use-select';
@@ -27,7 +29,7 @@ import { FlexibleOverlay } from '../../overlay';
 export default defineComponent({
   name: 'DSelect',
   props: selectProps,
-  emits: ['toggle-change', 'value-change', 'update:modelValue', 'focus', 'blur', 'remove-tag', 'clear'],
+  emits: ['toggle-change', 'value-change', 'update:modelValue', 'focus', 'blur', 'remove-tag', 'clear', 'load-more'],
   setup(props: SelectProps, ctx: SetupContext) {
     const app = getCurrentInstance();
     const t = createI18nTranslate('DSelect', app);
@@ -57,6 +59,7 @@ export default defineComponent({
       toggleChange,
       isShowCreateOption,
     } = useSelect(props, selectRef, ctx, focus, blur, isSelectFocus, t);
+    const dropdownContainer = ref();
     const { originRef, dropdownWidth } = useSelectMenuSize(selectRef, dropdownRef, isOpen);
 
     const scrollbarNs = useNamespace('scrollbar');
@@ -77,6 +80,20 @@ export default defineComponent({
       isRender.value = true;
     });
 
+    const scrollToBottom = () => {
+      const compareHeight = dropdownContainer.value.scrollHeight - dropdownContainer.value.clientHeight;
+      const scrollTop = dropdownContainer.value.scrollTop;
+      if (scrollTop === compareHeight) {
+        ctx.emit('load-more');
+      }
+    };
+
+    onMounted(() => {
+      nextTick(() => {
+        dropdownContainer.value.addEventListener('scroll', scrollToBottom);
+      });
+    });
+
     provide(
       SELECT_TOKEN,
       reactive({
@@ -119,7 +136,11 @@ export default defineComponent({
                   'z-index': isOpen.value ? 'var(--devui-z-index-dropdown, 1052)' : -1,
                 }}>
                 <div class={dropdownCls} style={{ width: `${dropdownWidth.value}px`, visibility: isOpen.value ? 'visible' : 'hidden' }}>
-                  <ul class={listCls} v-show={!isLoading.value} style={{ padding: isShowEmptyText.value ? '0' : '12px' }}>
+                  <ul
+                    class={listCls}
+                    v-show={!isLoading.value}
+                    style={{ padding: isShowEmptyText.value ? '0' : '12px' }}
+                    ref={dropdownContainer}>
                     {isShowCreateOption.value && (
                       <Option value={filterQuery.value} name={filterQuery.value} create>
                         {props.multiple ? <Checkbox modelValue={false} label={filterQuery.value} /> : filterQuery.value}

diff --git a/packages/devui-vue/docs/components/select/index.md b/packages/devui-vue/docs/components/select/index.md
@@ -199,7 +199,7 @@ export default defineComponent({
 <template>
   <div>
     <d-button @click.stop="toggleChange" @pointerup.stop="() => {}"  class="mb-2">展开 / 隐藏</d-button>
-    <d-select ref="demoSelect" v-model="toggleValue" :options="options"></d-select>
+    <d-select ref="demoSelect" v-model="toggleValue" :options="options" @load-more="loadMore"></d-select>
   </div>
 </template>
 
@@ -210,18 +210,26 @@ export default defineComponent({
   setup() {
     const toggleValue = ref('');
     const visitable = ref(false);
-    const items = new Array(6).fill(0).map((item, i) => `Option ${i + 1}`);
+    const items = new Array(12).fill(0).map((item, i) => `Option ${i + 1}`);
     const options = reactive(items);
+    const newItems = new Array(2).fill(0).map((item, i) => `Option new`);
     const demoSelect = ref(null);
     const toggleChange = () => {
       visitable.value = !visitable.value;
       demoSelect.value.toggleChange(visitable.value);
     };
+    const loadMore = () => {
+      if(options.length <= 20) {
+        options.push(...newItems);
+        console.log('load more');
+      }
+    };
     return {
       toggleValue,
       options,
       demoSelect,
       toggleChange,
+      loadMore,
     };
   },
 });
@@ -530,6 +538,7 @@ export default defineComponent({
 | blur          | `Function(e: FocusEvent)` | 可选，失去焦点时触发                                           |
 | clear         | `Function()`              | 可选, 通过右侧删除图标清空所有选项时触发                       |
 | remove-tag    | `Function(value)`         | 可选，多选时删除单个 tag 时触发，参数为当前 tag 的值           |
+| load-more    | `Function()`               | 可选，下拉框有滚动条时滚动到底部触发           |[下拉列表显隐方法](#下拉列表显隐方法)|
 
 ### Select 插槽