@corgicoding-el/data-pagination/lib/index.js

基于element-plus的分页组件

import { defineComponent as z, ref as v, computed as d, resolveComponent as b, openBlock as y, createElementBlock as C, createVNode as S, mergeProps as h, toHandlers as k } from "vue";
const l = /* @__PURE__ */ z({
  __name: "DataPagination",
  props: {
    currentPage: { default: 1 },
    pageSize: { default: 10 },
    small: { type: Boolean, default: !1 },
    disabled: { type: Boolean, default: !1 },
    background: { type: Boolean, default: !0 },
    total: { default: 0 },
    layout: { default: "total, sizes, prev, pager, next, jumper" },
    componentOptions: { default: () => ({}) },
    eventOptions: { default: () => ({}) }
  },
  emits: [
    "size-change",
    // 页码数变化
    "current-change",
    // 当前页变化
    "update:current-page",
    "update:pageSize"
  ],
  setup(n, { expose: g, emit: i }) {
    const r = v(), p = n, a = i, c = (e) => {
      a("size-change", e);
    }, m = (e) => {
      a("current-change", e);
    }, u = d({
      get: () => p.currentPage,
      set: (e) => {
        a("update:current-page", e);
      }
    }), s = d({
      get: () => p.pageSize,
      set: (e) => {
        a("update:pageSize", e);
      }
    });
    return g({
      elRef: r
    }), (e, t) => {
      const f = b("el-pagination");
      return y(), C("div", null, [
        S(f, h({
          ref_key: "elRef",
          ref: r,
          "current-page": u.value,
          "onUpdate:currentPage": t[0] || (t[0] = (o) => u.value = o),
          "page-size": s.value,
          "onUpdate:pageSize": t[1] || (t[1] = (o) => s.value = o),
          "page-sizes": [5, 10, 15, 20, 50, 100, 200, 500],
          small: e.small,
          "pager-count": 5,
          disabled: e.disabled,
          background: e.background,
          layout: e.layout,
          total: e.total
        }, e.componentOptions, {
          onSizeChange: c,
          onCurrentChange: m
        }, k(e.eventOptions)), null, 16, ["current-page", "page-size", "small", "disabled", "background", "layout", "total"])
      ]);
    };
  }
});
l.install = (n) => {
  n.component(l.__name, l);
};
export {
  l as default
};