vuux/dist/es/VirtualList/src/index.vue.mjs

Vue3 Nuxt3 Nuxt4 组件库

import { defineComponent as E, useTemplateRef as T, createElementBlock as s, openBlock as o, normalizeStyle as r, unref as t, createElementVNode as c, Fragment as k, renderList as _, renderSlot as B } from "vue";
import { useVirtualList as I } from "./hook/useVirtualList.mjs";
const z = /* @__PURE__ */ E({
  name: "VirtualList",
  __name: "index",
  props: {
    list: { default: () => [] },
    itemSize: { default: 50 },
    height: { default: 500 },
    overscan: { default: 5 }
  },
  setup(m, { expose: d }) {
    const f = m, a = T("virtualListEl"), { itemHeight: n, startIndex: e, totalHeight: v, heightStyle: h, visibleItems: g, onScroll: u, scrollToTop: x, scrollToBottom: y, scrollToIndex: L } = I(f, a);
    return d({
      /**
       * 滚动到顶部
       */
      scrollToTop: x,
      /**
       * 滚动到列表底部
       */
      scrollToBottom: y,
      /**
       * 滚动到指定索引
       */
      scrollToIndex: L
    }), (S, p) => (o(), s("div", {
      class: "app-virtual-list",
      style: r({ height: t(h) })
    }, [
      c("div", {
        ref_key: "virtualListEl",
        ref: a,
        class: "virtual-scroll",
        onScroll: p[0] || (p[0] = //@ts-ignore
        (...l) => t(u) && t(u)(...l))
      }, [
        c("div", {
          class: "virtual-list",
          style: r({ height: t(v) + "px", position: "relative" })
        }, [
          (o(!0), s(k, null, _(t(g), (l, i) => (o(), s("div", {
            key: t(e) + i,
            class: "virtual-item",
            style: r({ position: "absolute", top: (t(e) + i) * t(n) + "px", height: t(n) + "px" })
          }, [
            B(S.$slots, "default", {
              item: l,
              index: t(e) + i
            })
          ], 4))), 128))
        ], 4)
      ], 544)
    ], 4));
  }
});
export {
  z as default
};