birdpaper-ui
Version:
一个通用的 vue3 UI组件库。A common vue3 UI component library.
64 lines (63 loc) • 2.72 kB
JavaScript
import { defineComponent, ref, watchEffect, openBlock, createElementBlock, Fragment, renderList, normalizeClass, toDisplayString, createBlock, unref } from "vue";
import { IconMoreFill } from "birdpaper-icon";
const _hoisted_1 = ["onClick"];
const _hoisted_2 = { key: 0 };
const __default__ = defineComponent({
name: "PaginationPager"
});
const _sfc_main = /* @__PURE__ */ 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 = ref([]);
const onClick = (pageNum) => {
emits("click", pageNum);
};
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 openBlock(true), createElementBlock(Fragment, null, renderList(pageList.value, (item, index) => {
return openBlock(), createElementBlock("li", {
key: `page-item-${index}`,
class: normalizeClass([`${name}-pager`, `${name}-item`, item.index === __props.currentPage ? `${name}-item-active` : ""]),
onClick: ($event) => onClick(item.index)
}, [
item.type === "number" ? (openBlock(), createElementBlock("span", _hoisted_2, toDisplayString(item.index), 1)) : (openBlock(), createBlock(unref(IconMoreFill), { key: 1 }))
], 10, _hoisted_1);
}), 128);
};
}
});
export {
_sfc_main as default
};