mealcomes/dist/es/virtual-list-CiKIwcIK.mjs

MealComes 用于学习前端的组件库

import { c as g, w as z } from "./utils-aznwSRCL.mjs";
import { defineComponent as x, ref as r, reactive as w, computed as i, watch as M, onMounted as N, createVNode as c } from "vue";
const V = {
  /**
   * 每一行的高度
   */
  size: {
    type: Number,
    default: 27
  },
  /**
   * 可视窗口展示的数据条数
   */
  remain: {
    type: Number,
    default: 8
  },
  /**
   * 数据
   */
  items: {
    type: Array,
    default: () => []
  }
}, A = /* @__PURE__ */ x({
  name: "mc-virtual-list",
  props: V,
  setup(e, {
    slots: v
  }) {
    const l = g("virtual-list"), s = r(), u = r(), t = w({
      start: 0,
      end: e.remain
    }), m = i(() => Math.min(t.start, e.remain)), d = i(() => Math.min(e.items.length - t.end, e.remain)), h = i(() => e.items.slice(t.start - m.value, t.end + d.value)), o = r(0);
    let n = !1;
    const b = () => {
      n || (requestAnimationFrame(() => {
        const a = s.value.scrollTop;
        t.start = Math.floor(a / e.size), t.end = t.start + e.remain, o.value = t.start * e.size - e.size * m.value, n = !1;
      }), n = !0);
    }, f = () => {
      s.value.style.height = e.remain * e.size + "px", u.value.style.height = e.items.length * e.size + "px";
    };
    return M(() => e.items, f), N(() => {
      f();
    }), () => {
      var a;
      return c("div", {
        class: l.b(),
        ref: s,
        onScroll: b
      }, [c("div", {
        class: l.e("scroll-bar"),
        ref: u
      }, null), c("div", {
        class: l.e("scroll-list"),
        style: {
          transform: `translate3d(0, ${o.value}px, 0)`
        }
      }, [(a = h.value) == null ? void 0 : a.map((y) => v.default({
        node: y
      }))])]);
    };
  }
}), T = z(A);
export {
  T as V
};
//# sourceMappingURL=virtual-list-CiKIwcIK.mjs.map