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

* feat(select): select组件增加下拉框滚动到底部事件 * feat(select): demo补充 --------- Co-authored-by: GreatZP <greatzp@greatzp.cn>

Author: fengjiancai

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}

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 插槽