生产工具

YangYuGang

2025-03-05 6cc2d85787171281c269f4a6c3290b4a0762bcb6

 src/components/VirtualScroll/src/VirtualScroll.vue

@@ -11,8 +11,8 @@
    CSSProperties,
    PropType,
  } from 'vue';
  import { useEventListener } from '/@/hooks/event/useEventListener';
  import { getSlot } from '/@/utils/helper/tsxHelper';
  import { useEventListener } from '@/hooks/event/useEventListener';
  import { getSlot } from '@/utils/helper/tsxHelper';

  type NumberOrNumberString = PropType<string | number | undefined>;

@@ -52,7 +52,7 @@
  export default defineComponent({
    name: 'VirtualScroll',
    props,
    setup(props, { slots }) {
    setup(props, { slots, expose }) {
      const wrapElRef = ref<HTMLDivElement | null>(null);
      const state = reactive({
        first: 0,
@@ -128,6 +128,31 @@
        state.last = getLast(state.first);
      }

      function scrollToTop() {
        const wrapEl = unref(wrapElRef);
        if (!wrapEl) {
          return;
        }
        wrapEl.scrollTop = 0;
      }

      function scrollToBottom() {
        const wrapEl = unref(wrapElRef);
        if (!wrapEl) {
          return;
        }
        wrapEl.scrollTop = wrapEl.scrollHeight;
      }

      function scrollToItem(index: number) {
        const wrapEl = unref(wrapElRef);
        if (!wrapEl) {
          return;
        }
        const i = index - 1 > 0 ? index - 1 : 0;
        wrapEl.scrollTop = i * unref(getItemHeightRef);
      }

      function renderChildren() {
        const { items = [] } = props;
        return items.slice(unref(getFirstToRenderRef), unref(getLastToRenderRef)).map(genChild);
@@ -143,6 +168,13 @@
        );
      }

      expose({
        wrapElRef,
        scrollToTop,
        scrollToItem,
        scrollToBottom,
      });

      onMounted(() => {
        state.last = getLast(0);
        nextTick(() => {