213 lines
12 KiB
JavaScript
213 lines
12 KiB
JavaScript
import { w as withInstall } from "../badge/index2.js";
|
|
import { defineComponent, useSlots, ref, computed, watch, openBlock, createElementBlock, toDisplayString, unref, createCommentVNode, createElementVNode, normalizeClass, renderSlot, Fragment, createTextVNode, renderList, withDirectives, vModelSelect, withKeys, vModelText } from "vue";
|
|
import { u as useI18n } from "../datePicker/index2.js";
|
|
var index = /* @__PURE__ */ (() => ".layui-laypage{display:inline-block;vertical-align:middle;margin:10px 0;font-size:0}.layui-laypage>a:first-child,.layui-laypage>a:first-child em{border-radius:2px 0 0 2px}.layui-laypage>a:last-child,.layui-laypage>a:last-child em{border-radius:0 2px 2px 0}.layui-laypage>:first-child{margin-left:0!important}.layui-laypage>:last-child{margin-right:0!important}.layui-laypage a,.layui-laypage button,.layui-laypage input,.layui-laypage select,.layui-laypage span{border:1px solid var(--global-neutral-color-3)}.layui-laypage a,.layui-laypage span{display:inline-block;vertical-align:middle;padding:0 15px;height:28px;line-height:28px;margin:0 -1px 5px 0;background-color:#fff;color:#333;font-size:12px}.layui-laypage a:hover{color:var(--global-primary-color)}.layui-laypage-a-red:hover{color:#ff5722!important}.layui-laypage-a-orange:hover{color:#ffb800!important}.layui-laypage-a-green:hover{color:#009688!important}.layui-laypage-a-cyan:hover{color:#2f4056!important}.layui-laypage-a-blue:hover{color:#01aaed!important}.layui-laypage-a-black:hover{color:#000!important}.layui-laypage-a-gray:hover{color:#c2c2c2!important}.layui-laypage em{font-style:normal}.layui-laypage .layui-laypage-spr{color:#999;font-weight:700}.layui-laypage a{text-decoration:none}.layui-laypage .layui-laypage-curr{position:relative}.layui-laypage .layui-laypage-curr em{position:relative;color:#fff}.layui-laypage .layui-laypage-curr .layui-laypage-em{position:absolute;left:-1px;top:-1px;padding:1px;width:100%;height:100%;background-color:var(--global-primary-color)}.layui-laypage-em{border-radius:2px}.layui-laypage-next em,.layui-laypage-prev em{font-family:Sim sun;font-size:16px}.layui-laypage .layui-laypage-count,.layui-laypage .layui-laypage-limits,.layui-laypage .layui-laypage-refresh,.layui-laypage .layui-laypage-skip{margin-left:10px;margin-right:10px;padding:0;border:none}.layui-laypage .layui-laypage-limits,.layui-laypage .layui-laypage-refresh{vertical-align:top}.layui-laypage .layui-laypage-refresh i{font-size:18px;cursor:pointer}.layui-laypage select{height:22px;padding:3px;margin-top:4px;border-radius:2px;cursor:pointer}.layui-laypage .layui-laypage-skip{height:30px;line-height:30px;color:#999}.layui-laypage button,.layui-laypage input{height:30px;line-height:30px;border-radius:2px;vertical-align:top;background-color:#fff;box-sizing:border-box}.layui-laypage input{display:inline-block;width:40px;margin:0 10px;padding:0 3px;text-align:center}.layui-laypage input::-webkit-outer-spin-button,.layui-laypage input::-webkit-inner-spin-button{-webkit-appearance:none}.layui-laypage input:focus,.layui-laypage select:focus{border-color:var(--global-primary-color)!important}.layui-laypage button{margin-left:10px;padding:0 10px;cursor:pointer}\n")();
|
|
const _hoisted_1 = { class: "layui-laypage layui-laypage-default" };
|
|
const _hoisted_2 = {
|
|
key: 0,
|
|
class: "layui-laypage-count"
|
|
};
|
|
const _hoisted_3 = {
|
|
key: 0,
|
|
class: "layui-laypage-curr"
|
|
};
|
|
const _hoisted_4 = ["onClick"];
|
|
const _hoisted_5 = {
|
|
key: 2,
|
|
class: "layui-laypage-limits"
|
|
};
|
|
const _hoisted_6 = ["value"];
|
|
const _hoisted_7 = /* @__PURE__ */ createElementVNode("i", { class: "layui-icon layui-icon-refresh" }, null, -1);
|
|
const _hoisted_8 = [
|
|
_hoisted_7
|
|
];
|
|
const _hoisted_9 = {
|
|
key: 4,
|
|
class: "layui-laypage-skip"
|
|
};
|
|
const _hoisted_10 = ["disabled"];
|
|
const _hoisted_11 = { key: 5 };
|
|
const __default__ = {
|
|
name: "LayPage"
|
|
};
|
|
const _sfc_main = defineComponent({
|
|
...__default__,
|
|
props: {
|
|
total: null,
|
|
limit: { default: 10 },
|
|
theme: { default: "green" },
|
|
showPage: { type: Boolean, default: false },
|
|
showSkip: { type: Boolean, default: false },
|
|
showCount: { type: Boolean, default: false },
|
|
showLimit: { type: Boolean, default: true },
|
|
showInput: { type: Boolean, default: false },
|
|
showRefresh: { type: Boolean, default: false },
|
|
pages: { default: 10 },
|
|
limits: { default: () => [10, 20, 30, 40, 50] },
|
|
modelValue: { default: 1 },
|
|
count: null
|
|
},
|
|
emits: ["update:modelValue", "update:limit", "change"],
|
|
setup(__props, { emit }) {
|
|
const props = __props;
|
|
const { t } = useI18n();
|
|
const slots = useSlots();
|
|
const maxPage = ref(0);
|
|
const limits = ref(props.limits);
|
|
const pages = computed(() => Math.floor(props.pages / 2));
|
|
const currentPage = ref(props.modelValue);
|
|
const currentPageShow = ref(currentPage.value);
|
|
const inlimit = ref(props.limit);
|
|
watch(() => props.limit, () => {
|
|
inlimit.value = props.limit;
|
|
});
|
|
const totalPage = computed(() => {
|
|
maxPage.value = Math.ceil(props.total / inlimit.value);
|
|
let r = [];
|
|
let start = maxPage.value <= props.pages ? 1 : currentPage.value > pages.value ? maxPage.value - currentPage.value + 1 < pages.value ? currentPage.value - (pages.value + (pages.value - (maxPage.value - currentPage.value + 1))) : currentPage.value - pages.value : 1;
|
|
for (let i = start; ; i++) {
|
|
if (r.length >= props.pages || i > maxPage.value) {
|
|
break;
|
|
}
|
|
r.push(i);
|
|
}
|
|
return r;
|
|
});
|
|
const prev = () => {
|
|
if (currentPage.value === 1) {
|
|
return;
|
|
}
|
|
currentPage.value--;
|
|
emit("change", { current: currentPage.value, limit: inlimit.value });
|
|
};
|
|
const next = () => {
|
|
if (currentPage.value === maxPage.value || maxPage.value === 0) {
|
|
return;
|
|
}
|
|
currentPage.value++;
|
|
emit("change", { current: currentPage.value, limit: inlimit.value });
|
|
};
|
|
const jump = (page) => {
|
|
currentPage.value = page;
|
|
emit("change", { current: currentPage.value, limit: inlimit.value });
|
|
};
|
|
const jumpPage = () => {
|
|
currentPage.value = currentPageShow.value;
|
|
emit("change", { current: currentPage.value, limit: inlimit.value });
|
|
};
|
|
const changelimit = () => {
|
|
const maxPage2 = Math.ceil(props.total / inlimit.value);
|
|
if (currentPage.value > maxPage2) {
|
|
currentPage.value = maxPage2;
|
|
}
|
|
emit("change", { current: currentPage.value, limit: inlimit.value });
|
|
};
|
|
const refresh = () => {
|
|
emit("change", { current: currentPage.value, limit: inlimit.value });
|
|
};
|
|
watch(inlimit, () => {
|
|
emit("update:limit", inlimit.value);
|
|
});
|
|
watch(currentPage, () => {
|
|
const min = totalPage.value[0];
|
|
const max = totalPage.value[totalPage.value.length - 1];
|
|
if (currentPage.value > max)
|
|
currentPage.value = max;
|
|
if (currentPage.value < min)
|
|
currentPage.value = min;
|
|
currentPageShow.value = currentPage.value;
|
|
emit("update:modelValue", currentPage.value);
|
|
});
|
|
watch(() => props.modelValue, () => {
|
|
currentPage.value = props.modelValue;
|
|
currentPageShow.value = currentPage.value;
|
|
});
|
|
return (_ctx, _cache) => {
|
|
return openBlock(), createElementBlock("div", _hoisted_1, [
|
|
__props.showCount ? (openBlock(), createElementBlock("span", _hoisted_2, toDisplayString(unref(t)("page.total")) + " " + toDisplayString(__props.total) + " " + toDisplayString(unref(t)("page.item")) + " " + toDisplayString(maxPage.value) + " " + toDisplayString(unref(t)("page.page")), 1)) : createCommentVNode("", true),
|
|
createElementVNode("a", {
|
|
href: "javascript:;",
|
|
class: normalizeClass(["layui-laypage-prev", [
|
|
currentPage.value === 1 ? "layui-disabled" : "",
|
|
__props.theme && currentPage.value !== 1 ? "layui-laypage-a-" + __props.theme : ""
|
|
]]),
|
|
onClick: _cache[0] || (_cache[0] = ($event) => prev())
|
|
}, [
|
|
unref(slots).prev ? renderSlot(_ctx.$slots, "prev", { key: 0 }) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
|
|
createTextVNode(toDisplayString(unref(t)("page.previous")), 1)
|
|
], 64))
|
|
], 2),
|
|
__props.showPage ? (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(unref(totalPage), (index2) => {
|
|
return openBlock(), createElementBlock(Fragment, { key: index2 }, [
|
|
index2 === currentPage.value ? (openBlock(), createElementBlock("span", _hoisted_3, [
|
|
createElementVNode("em", {
|
|
class: normalizeClass(["layui-laypage-em", [__props.theme ? "layui-bg-" + __props.theme : ""]])
|
|
}, null, 2),
|
|
createElementVNode("em", null, toDisplayString(index2), 1)
|
|
])) : (openBlock(), createElementBlock("a", {
|
|
key: 1,
|
|
href: "javascript:;",
|
|
onClick: ($event) => jump(index2),
|
|
class: normalizeClass([__props.theme ? "layui-laypage-a-" + __props.theme : ""])
|
|
}, toDisplayString(index2), 11, _hoisted_4))
|
|
], 64);
|
|
}), 128)) : createCommentVNode("", true),
|
|
createElementVNode("a", {
|
|
href: "javascript:;",
|
|
class: normalizeClass(["layui-laypage-next", [
|
|
currentPage.value === maxPage.value || maxPage.value === 0 ? "layui-disabled" : "",
|
|
__props.theme && currentPage.value !== maxPage.value && maxPage.value !== 0 ? "layui-laypage-a-" + __props.theme : ""
|
|
]]),
|
|
onClick: _cache[1] || (_cache[1] = ($event) => next())
|
|
}, [
|
|
unref(slots).next ? renderSlot(_ctx.$slots, "next", { key: 0 }) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
|
|
createTextVNode(toDisplayString(unref(t)("page.next")), 1)
|
|
], 64))
|
|
], 2),
|
|
__props.showLimit ? (openBlock(), createElementBlock("span", _hoisted_5, [
|
|
withDirectives(createElementVNode("select", {
|
|
"onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => inlimit.value = $event),
|
|
onChange: changelimit
|
|
}, [
|
|
(openBlock(true), createElementBlock(Fragment, null, renderList(limits.value, (val) => {
|
|
return openBlock(), createElementBlock("option", {
|
|
key: val,
|
|
value: val
|
|
}, toDisplayString(val) + " " + toDisplayString(unref(t)("page.item")) + "/" + toDisplayString(unref(t)("page.page")), 9, _hoisted_6);
|
|
}), 128))
|
|
], 544), [
|
|
[vModelSelect, inlimit.value]
|
|
])
|
|
])) : createCommentVNode("", true),
|
|
__props.showRefresh ? (openBlock(), createElementBlock("a", {
|
|
key: 3,
|
|
href: "javascript:;",
|
|
onClick: refresh,
|
|
class: "layui-laypage-refresh"
|
|
}, _hoisted_8)) : createCommentVNode("", true),
|
|
props.showSkip ? (openBlock(), createElementBlock("span", _hoisted_9, [
|
|
createTextVNode(toDisplayString(unref(t)("page.goTo")) + " ", 1),
|
|
withDirectives(createElementVNode("input", {
|
|
"onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => currentPageShow.value = $event),
|
|
onKeypress: _cache[4] || (_cache[4] = withKeys(($event) => jumpPage(), ["enter"])),
|
|
type: "number",
|
|
class: "layui-input layui-input-number"
|
|
}, null, 544), [
|
|
[vModelText, currentPageShow.value]
|
|
]),
|
|
createTextVNode(toDisplayString(unref(t)("page.page")) + " ", 1),
|
|
createElementVNode("button", {
|
|
type: "button",
|
|
class: "layui-laypage-btn",
|
|
onClick: _cache[5] || (_cache[5] = ($event) => jumpPage()),
|
|
disabled: currentPageShow.value > maxPage.value || currentPageShow.value == currentPage.value
|
|
}, toDisplayString(unref(t)("page.confirm")), 9, _hoisted_10)
|
|
])) : createCommentVNode("", true),
|
|
__props.count ? (openBlock(), createElementBlock("span", _hoisted_11, "\u5171" + toDisplayString(__props.count) + "\u6761", 1)) : createCommentVNode("", true)
|
|
]);
|
|
};
|
|
}
|
|
});
|
|
const component = withInstall(_sfc_main);
|
|
export { _sfc_main as _, component as c };
|