vue3-virtual-list-ts/dist/lib.mjs

A virtual list component based on vue3 + ts

import { defineComponent as E, toRefs as H, ref as i, watch as M, onMounted as N, openBlock as c, createElementBlock as v, normalizeStyle as _, Fragment as V, renderList as P, renderSlot as f, createCommentVNode as x, pushScopeId as R, popScopeId as T, createElementVNode as w } from "vue";
const q = E({
  name: "virtualList",
  props: {
    data: {
      type: Array,
      default: () => []
    },
    dataKey: {
      type: String,
      default: "id"
    },
    showLoading: {
      type: Boolean,
      default: !0
    },
    itemHeight: {
      type: Number,
      default: 40
    },
    dataBuffer: {
      type: Number,
      default: 50
    },
    onCompelete: {
      type: Function,
      default: null
    }
  },
  setup(e) {
    const { data: a, dataBuffer: t, itemHeight: l, onCompelete: s } = H(e), o = i(null), d = i(0), r = i([]), p = i(0), m = i(0);
    let n = {
      startIndex: 0,
      endIndex: 0
    }, h = !1, g = !1;
    const L = window.requestAnimationFrame, $ = () => {
      h || (y(), L(
        () => I()()()()
      ));
    }, I = () => {
      var u;
      return n.startIndex = o.value ? ~~(((u = o == null ? void 0 : o.value) == null ? void 0 : u.scrollTop) / (l == null ? void 0 : l.value)) - (t == null ? void 0 : t.value) / 2 : 0, n.startIndex = Math.max(n.startIndex, 0), n.endIndex = n.startIndex + d.value + (t == null ? void 0 : t.value), n.endIndex = Math.min(a.value.length - 1, n.endIndex), () => D();
    }, D = () => (r.value = a.value.slice(n.startIndex, n.endIndex).map((u, b) => ({
      ...u,
      __index__: b + n.startIndex
    })), () => C()), y = () => (h = !h, F()), C = () => (p.value = n.startIndex * l.value, () => y()), S = () => m.value = a.value.length * l.value, F = () => {
      var u;
      if (n.startIndex + d.value + (t == null ? void 0 : t.value) / 2 > a.value.length - 1 && !g)
        return A(), console.log(s), (u = s == null ? void 0 : s.value) == null ? void 0 : u.call(s);
    }, k = () => {
      d.value = o.value ? Math.ceil(o.value.clientHeight / l.value) + 1 : 0;
    }, A = () => g = !g;
    return M(e, () => {
      S(), g = !1;
    }), N(() => (S(), k(), I()()())), {
      handleScroll: $,
      paddingTop: p,
      containerHeight: m,
      showDataList: r,
      vitrualListContainer: o
    };
  }
});
const K = (e, a) => {
  const t = e.__vccOpts || e;
  for (const [l, s] of a)
    t[l] = s;
  return t;
}, z = (e) => (R("data-v-b59aa89d"), e = e(), T(), e), B = { key: 0 }, O = /* @__PURE__ */ z(() => /* @__PURE__ */ w("div", { class: "vitrual-list-loading" }, [
  /* @__PURE__ */ w("span", null, "\u6B63\u5728\u52AA\u529B\u52A0\u8F7D\u4E2D\uFF5E")
], -1));
function j(e, a, t, l, s, o) {
  var d;
  return c(), v("div", {
    ref: "vitrualListContainer",
    onScrollPassive: a[0] || (a[0] = (...r) => e.handleScroll && e.handleScroll(...r)),
    class: "vitrual-list-container"
  }, [
    (d = e.data) != null && d.length ? (c(), v("div", {
      key: 0,
      class: "vitrual-list-scroll-list",
      style: _(`
        padding-top: ${e.paddingTop}px;
        height: ${e.containerHeight}px;
      `)
    }, [
      (c(!0), v(V, null, P(e.showDataList, (r, p) => (c(), v("div", {
        key: r[e.dataKey],
        class: "vitrual-list-scroll-item",
        style: _(`height: ${e.itemHeight}px`)
      }, [
        f(e.$slots, "default", {
          item: r,
          index: p
        }, void 0, !0)
      ], 4))), 128)),
      e.showLoading ? (c(), v("div", B, [
        f(e.$slots, "loading", {}, () => [
          O
        ], !0)
      ])) : x("", !0)
    ], 4)) : x("", !0)
  ], 544);
}
const G = /* @__PURE__ */ K(q, [["render", j], ["__scopeId", "data-v-b59aa89d"]]), Q = {
  VirtualList: G
};
export {
  Q as default
};