sci-pro
Version:
159 lines (158 loc) • 5.71 kB
JavaScript
import { defineComponent as k, ref as c, computed as b, reactive as E, watch as z, onMounted as I, watchEffect as C, resolveComponent as L, openBlock as d, createElementBlock as m, createElementVNode as s, toDisplayString as h, createVNode as J, Fragment as K, renderList as A, normalizeClass as F, withDirectives as G, withKeys as O, vModelText as q } from "vue";
import "./style/index.css";
const H = { class: "sci-pagination" }, Q = { class: "sci-total" }, R = { class: "sci-content" }, W = { class: "sci-page-container" }, X = ["onClick"], Y = {
key: 0,
class: "sci-page-text"
}, Z = { key: 1 }, ee = { class: "jumper-wrap" }, te = { class: "jumper-txt" }, ae = { class: "jumper-txt" }, le = k({ name: "sci-pagination" }), se = /* @__PURE__ */ k({
...le,
props: {
total: {
type: [Number, String],
default: "100"
},
// 总数
pageNum: { type: [Number, String], default: 1 },
// 当前页
pageSize: { type: [Number, String], default: () => 10 },
//每页显示条数
pageSizes: {
type: Array,
default: () => []
},
tmpString: { type: String, default: "Goto {jumper}" },
//
pagerCount: { type: Number, default: 7 }
//最大页码数
},
emits: ["current-change", "size-change"],
setup(j, { emit: V }) {
const u = j, w = c("/page"), M = b(() => [u.pageSize]), D = b(() => u.pageSizes.length ? u.pageSizes.map((e) => ({ value: e, label: `${e}/page` })) : [
{ value: 10, label: "10/page" },
{ value: 15, label: "15/page" },
{ value: 20, label: "20/page" },
{ value: 50, label: "50/page" },
{ value: 100, label: "100/page" }
]), P = b(() => Number(u.total)), n = c(0), f = c(Number(u.pageSize)), a = c(Number(u.pageNum || 1)), T = "{jumper}", i = c(0), x = E({ prefix: "", suffix: "" }), r = c([]), y = V;
z(
() => [u.total, f.value],
() => {
N();
}
), z(
() => u.pageNum,
(e, l) => {
a.value = e;
}
), I(() => {
N(!0);
});
const U = (e) => {
f.value = Number(e), a.value = 1, y("size-change", f.value);
}, N = (e = !1) => {
n.value = Math.ceil(
u.total / f.value
), n.value && !e && v("page", a.value, !1);
}, $ = (e) => (e + "").replace(/\D/g, "") * 1, S = (e) => {
let l = $(i.value);
l < 1 && (i.value = 1), l > n.value && (i.value = n.value), v("page", i.value);
}, B = (e) => {
i.value = e.target.value.replace(/\D/g, "");
};
C(() => {
const e = u.tmpString.split(T);
e && e.length > 1 && (x.prefix = e[0], x.suffix = e[1]), i.value = u.pageNum;
}), C(() => {
n.value, a.value;
const { pagerCount: e } = u;
if (r.value = [], n.value < e + 1) {
for (let p = 1; p < n.value + 1; p++)
r.value.push({
index: p,
type: "number"
});
return;
}
const l = Math.round(e / 2 + 1), o = e - 2, t = a.value >= l, _ = a.value <= Number(n.value - l);
r.value = [{ index: 1, type: "number" }], t && r.value.push({
index: a.value - o,
//点击向前缩进页数
type: "ellipsis"
});
let g = 0;
!t && (g = 2), t && _ && (g = a.value - Math.round(o / 2) + 1), !_ && (g = n.value - o);
for (let p = g; p < o + g; p++)
r.value.push({
index: p,
type: "number"
});
_ && r.value.push({
index: a.value + o,
// 点击向后跳转页数
type: "ellipsis"
}), r.value.push({ index: n.value, type: "number" });
});
const v = (e, l = 1, o = !0) => {
if (e === "prev" && a.value === 1 || e === "next" && a.value === n.value)
return;
let t = a.value;
e === "prev" ? t-- : e === "next" ? t++ : t = Number(l), a.value = t < 1 ? 1 : t > n.value ? n.value : t, i.value = a.value, o && y("current-change", a.value);
};
return (e, l) => {
const o = L("sci-select");
return d(), m("div", H, [
s("span", Q, "Total " + h(P.value), 1),
s("div", R, [
J(o, {
options: D.value,
defaultValues: M.value,
txtUnit: w.value,
selectStyle: { width: "90px", "margin-right": "10px" },
onChange: U
}, null, 8, ["options", "defaultValues", "txtUnit"]),
s("span", {
class: "sci-icon",
onClick: l[0] || (l[0] = (t) => v("prev"))
}),
s("div", W, [
(d(!0), m(K, null, A(r.value, (t) => (d(), m("div", {
key: t.index + t.type
}, [
s("li", {
class: F(["sci-page-item", { "page-item-active": t.index === a.value }]),
onClick: (_) => v("page", t.index)
}, [
t.type === "number" ? (d(), m("span", Y, h(t.index), 1)) : (d(), m("span", Z, " ... "))
], 10, X)
]))), 128))
]),
s("span", {
class: "sci-icon sci-icon-next",
onClick: l[1] || (l[1] = (t) => v("next"))
}),
s("div", ee, [
s("span", te, h(x.prefix), 1),
G(s("input", {
class: "jumper-val",
type: "text",
"onUpdate:modelValue": l[2] || (l[2] = (t) => i.value = t),
onBlur: S,
onInput: B,
onKeyup: O(S, ["enter"])
}, null, 544), [
[
q,
i.value,
void 0,
{ number: !0 }
]
]),
s("span", ae, h(x.suffix), 1)
])
])
]);
};
}
});
export {
se as default
};