birdpaper-ui
Version:
一个通用的 vue3 UI组件库。A common vue3 UI component library.
63 lines (62 loc) • 2.67 kB
JavaScript
;
const vue = require("vue");
const birdpaperIcon = require("birdpaper-icon");
const _hoisted_1 = ["onClick"];
const _hoisted_2 = { key: 0 };
const __default__ = vue.defineComponent({
name: "PaginationPager"
});
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
...__default__,
props: {
currentPage: { type: Number, default: 1 },
pages: { type: Number, default: 0 },
maxPager: { type: Number, default: 0 }
},
emits: ["click"],
setup(__props, { emit: emits }) {
const props = __props;
const name = "bp-pagination";
const pageList = vue.ref([]);
const onClick = (pageNum) => {
emits("click", pageNum);
};
vue.watchEffect(() => {
const { pages, currentPage, maxPager } = props;
pageList.value = [];
if (pages < maxPager + 1) {
for (let i = 1; i < pages + 1; i++) {
pageList.value.push({ index: i, type: "number" });
}
return;
}
const omit_num = Number((maxPager / 2 + 1).toFixed());
const middle_page_count = maxPager - 2;
const is_front_omit = currentPage >= omit_num;
const is_end_omit = currentPage <= Number(pages - omit_num);
pageList.value = [{ index: 1, type: "number" }];
is_front_omit && pageList.value.push({ index: currentPage - middle_page_count, type: "ellipsis" });
let start_index;
!is_front_omit && (start_index = 2);
is_front_omit && is_end_omit && (start_index = currentPage - Number((middle_page_count / 2).toFixed()) + 1);
!is_end_omit && (start_index = pages - middle_page_count);
for (let i = start_index; i < middle_page_count + start_index; i++) {
pageList.value.push({ index: i, type: "number" });
}
is_end_omit && pageList.value.push({ index: currentPage + middle_page_count, type: "ellipsis" });
pageList.value.push({ index: pages, type: "number" });
});
return (_ctx, _cache) => {
return vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(pageList.value, (item, index) => {
return vue.openBlock(), vue.createElementBlock("li", {
key: `page-item-${index}`,
class: vue.normalizeClass([`${name}-pager`, `${name}-item`, item.index === __props.currentPage ? `${name}-item-active` : ""]),
onClick: ($event) => onClick(item.index)
}, [
item.type === "number" ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2, vue.toDisplayString(item.index), 1)) : (vue.openBlock(), vue.createBlock(vue.unref(birdpaperIcon.IconMoreFill), { key: 1 }))
], 10, _hoisted_1);
}), 128);
};
}
});
module.exports = _sfc_main;