element-plus-pagination-enhancement
Version:
A powerful enhancement for Element Plus Pagination component that adds first/last page navigation
267 lines (266 loc) • 9.21 kB
JavaScript
import { defineComponent as m, createElementBlock as l, openBlock as t, createElementVNode as r, ref as B, computed as P, watch as U, resolveComponent as x, createCommentVNode as L, toDisplayString as V, createVNode as u, withCtx as v, Fragment as S, renderList as A, createBlock as E, unref as f, normalizeClass as $, createTextVNode as N, withKeys as q } from "vue";
/*! Element Plus Icons Vue v2.3.1 */
var I = /* @__PURE__ */ m({
name: "ArrowLeft",
__name: "arrow-left",
setup(o) {
return (d, s) => (t(), l("svg", {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 1024 1024"
}, [
r("path", {
fill: "currentColor",
d: "M609.408 149.376 277.76 489.6a32 32 0 0 0 0 44.672l331.648 340.352a29.12 29.12 0 0 0 41.728 0 30.592 30.592 0 0 0 0-42.752L339.264 511.936l311.872-319.872a30.592 30.592 0 0 0 0-42.688 29.12 29.12 0 0 0-41.728 0z"
})
]));
}
}), G = I, H = /* @__PURE__ */ m({
name: "ArrowRight",
__name: "arrow-right",
setup(o) {
return (d, s) => (t(), l("svg", {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 1024 1024"
}, [
r("path", {
fill: "currentColor",
d: "M340.864 149.312a30.592 30.592 0 0 0 0 42.752L652.736 512 340.864 831.872a30.592 30.592 0 0 0 0 42.752 29.12 29.12 0 0 0 41.728 0L714.24 534.336a32 32 0 0 0 0-44.672L382.592 149.376a29.12 29.12 0 0 0-41.728 0z"
})
]));
}
}), O = H, Q = /* @__PURE__ */ m({
name: "DArrowLeft",
__name: "d-arrow-left",
setup(o) {
return (d, s) => (t(), l("svg", {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 1024 1024"
}, [
r("path", {
fill: "currentColor",
d: "M529.408 149.376a29.12 29.12 0 0 1 41.728 0 30.592 30.592 0 0 1 0 42.688L259.264 511.936l311.872 319.936a30.592 30.592 0 0 1-.512 43.264 29.12 29.12 0 0 1-41.216-.512L197.76 534.272a32 32 0 0 1 0-44.672l331.648-340.224zm256 0a29.12 29.12 0 0 1 41.728 0 30.592 30.592 0 0 1 0 42.688L515.264 511.936l311.872 319.936a30.592 30.592 0 0 1-.512 43.264 29.12 29.12 0 0 1-41.216-.512L453.76 534.272a32 32 0 0 1 0-44.672l331.648-340.224z"
})
]));
}
}), W = Q, X = /* @__PURE__ */ m({
name: "DArrowRight",
__name: "d-arrow-right",
setup(o) {
return (d, s) => (t(), l("svg", {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 1024 1024"
}, [
r("path", {
fill: "currentColor",
d: "M452.864 149.312a29.12 29.12 0 0 1 41.728.064L826.24 489.664a32 32 0 0 1 0 44.672L494.592 874.624a29.12 29.12 0 0 1-41.728 0 30.592 30.592 0 0 1 0-42.752L764.736 512 452.864 192a30.592 30.592 0 0 1 0-42.688m-256 0a29.12 29.12 0 0 1 41.728.064L570.24 489.664a32 32 0 0 1 0 44.672L238.592 874.624a29.12 29.12 0 0 1-41.728 0 30.592 30.592 0 0 1 0-42.752L508.736 512 196.864 192a30.592 30.592 0 0 1 0-42.688z"
})
]));
}
}), Y = X, Z = /* @__PURE__ */ m({
name: "More",
__name: "more",
setup(o) {
return (d, s) => (t(), l("svg", {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 1024 1024"
}, [
r("path", {
fill: "currentColor",
d: "M176 416a112 112 0 1 0 0 224 112 112 0 0 0 0-224m0 64a48 48 0 1 1 0 96 48 48 0 0 1 0-96m336-64a112 112 0 1 1 0 224 112 112 0 0 1 0-224m0 64a48 48 0 1 0 0 96 48 48 0 0 0 0-96m336-64a112 112 0 1 1 0 224 112 112 0 0 1 0-224m0 64a48 48 0 1 0 0 96 48 48 0 0 0 0-96"
})
]));
}
}), ee = Z;
const te = { class: "enhanced-pagination" }, ae = { class: "el-pagination is-background" }, oe = { class: "el-pagination__total" }, ne = {
key: 0,
class: "el-pagination__sizes"
}, le = { class: "btn-group" }, re = ["disabled"], ue = ["disabled"], se = { class: "el-pager" }, ie = ["onClick"], _e = { class: "btn-group" }, ce = ["disabled"], de = ["disabled"], pe = {
key: 1,
class: "el-pagination__jump"
}, ge = /* @__PURE__ */ m({
__name: "EnhancedPagination",
props: {
total: {
type: Number,
required: !0
},
pageSize: {
type: Number,
default: 10
},
currentPage: {
type: Number,
default: 1
},
pageSizes: {
type: Array,
default: () => [10, 20, 30, 40, 50]
},
showSizes: {
type: Boolean,
default: !0
},
showFirstPage: {
type: Boolean,
default: !0
},
showLastPage: {
type: Boolean,
default: !0
},
showJumper: {
type: Boolean,
default: !0
},
pagerCount: {
type: Number,
default: 7
}
},
emits: ["update:currentPage", "update:pageSize", "size-change", "current-change"],
setup(o, { emit: d }) {
const s = o, w = d, y = (e, n) => Array.from({ length: n }, (g, i) => e + i), c = B(s.currentPage), h = B(s.pageSize), b = B(""), C = P(() => Math.ceil(s.total / h.value)), z = P(() => c.value === 1), k = P(() => c.value === C.value), F = P(() => {
const e = s.pagerCount, n = Math.floor(e / 2), g = c.value, i = C.value, _ = [];
return i <= e ? y(1, i) : (g <= n ? _.push(...y(1, e - 1), "...", i) : g > i - n ? _.push(1, "...", ...y(i - e + 2, e - 1)) : _.push(1, "...", ...y(g - n, e - 2), "...", i), _);
}), p = (e) => {
typeof e == "number" && e !== c.value && (c.value = e, w("update:currentPage", e), w("current-change", e));
}, D = (e) => {
h.value = e, w("update:pageSize", e), w("size-change", e);
};
U(() => s.pageSize, (e) => {
typeof e == "number" && (h.value = e);
});
const M = () => {
const e = parseInt(b.value);
!isNaN(e) && e >= 1 && e <= C.value && p(e), b.value = "";
}, J = () => {
p(1);
}, T = () => {
p(C.value);
}, j = () => {
z.value || p(c.value - 1);
}, K = () => {
k.value || p(c.value + 1);
};
return (e, n) => {
const g = x("el-option"), i = x("el-select"), _ = x("el-icon"), R = x("el-input");
return t(), l("div", te, [
r("div", ae, [
r("div", oe, "共 " + V(o.total) + " 条记录", 1),
o.showSizes ? (t(), l("div", ne, [
u(i, {
modelValue: h.value,
"onUpdate:modelValue": n[0] || (n[0] = (a) => h.value = a),
onChange: D
}, {
default: v(() => [
(t(!0), l(S, null, A(o.pageSizes, (a) => (t(), E(g, {
key: a,
value: a,
label: `${a} 条/页`
}, null, 8, ["value", "label"]))), 128))
]),
_: 1
}, 8, ["modelValue"])
])) : L("", !0),
r("div", le, [
o.showFirstPage ? (t(), l("button", {
key: 0,
type: "button",
disabled: z.value,
onClick: J
}, [
u(_, null, {
default: v(() => [
u(f(W))
]),
_: 1
})
], 8, re)) : L("", !0),
r("button", {
type: "button",
disabled: z.value,
onClick: j
}, [
u(_, null, {
default: v(() => [
u(f(G))
]),
_: 1
})
], 8, ue)
]),
r("ul", se, [
(t(!0), l(S, null, A(F.value, (a) => (t(), l("li", {
key: a,
class: $({
number: !0,
active: a === c.value,
more: a === "..."
}),
onClick: (ve) => a !== "..." && p(a)
}, [
a === "..." ? (t(), E(_, {
key: 0,
class: "more"
}, {
default: v(() => [
u(f(ee))
]),
_: 1
})) : (t(), l(S, { key: 1 }, [
N(V(a), 1)
], 64))
], 10, ie))), 128))
]),
r("div", _e, [
r("button", {
type: "button",
disabled: k.value,
onClick: K
}, [
u(_, null, {
default: v(() => [
u(f(O))
]),
_: 1
})
], 8, ce),
o.showLastPage ? (t(), l("button", {
key: 0,
type: "button",
disabled: k.value,
onClick: T
}, [
u(_, null, {
default: v(() => [
u(f(Y))
]),
_: 1
})
], 8, de)) : L("", !0)
]),
o.showJumper ? (t(), l("div", pe, [
n[2] || (n[2] = N(" 前往 ")),
u(R, {
modelValue: b.value,
"onUpdate:modelValue": n[1] || (n[1] = (a) => b.value = a),
modelModifiers: { number: !0 },
onChange: M,
onKeyup: q(M, ["enter"])
}, null, 8, ["modelValue"]),
n[3] || (n[3] = N(" 页 "))
])) : L("", !0)
])
]);
};
}
}), he = {
install: (o) => {
o.component("EnhancedPagination", ge);
}
};
export {
ge as EnhancedPagination,
he as default
};