tass-ui
Version:
A high quality UI Toolkit built on Vue.js3+.
97 lines (96 loc) • 3.45 kB
JavaScript
;
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const vue = require("vue");
require("../../../theme-chalk/src/pagination.scss.js");
const _hoisted_1 = { class: "tas-pagination" };
const _hoisted_2 = { key: 0 };
const _hoisted_3 = ["onClick"];
const _hoisted_4 = { key: 1 };
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
__name: "pagination",
props: {
//数据总条数
total: {
type: Number,
default: 80
},
//每页数据条数
pagesize: {
type: Number,
default: 8
}
},
emits: ["change-page"],
setup(__props, { emit }) {
const props = __props;
let pages = vue.computed(() => Math.ceil(props.total / props.pagesize));
const attrs = vue.useAttrs();
const currentPage = vue.ref(attrs.page || 1);
const list = vue.computed(() => {
const result = [];
if (pages.value <= 5) {
for (let i = 1; i <= pages.value; i++) {
result.push(i);
}
} else {
if (currentPage.value <= 2) {
for (let i = 1; i <= 5; i++) {
result.push(i);
}
} else if (currentPage.value >= pages.value - 1) {
for (let i = pages.value - 4; i <= pages.value; i++) {
result.push(i);
}
} else {
for (let i = currentPage.value - 2; i <= currentPage.value + 2; i++) {
result.push(i);
}
}
}
return result;
});
const changePage = (type) => {
if (type === false) {
if (currentPage.value === 1)
return;
if (currentPage.value > 1) {
currentPage.value -= 1;
}
} else if (type === true) {
if (currentPage.value === pages.value)
return;
if (currentPage.value < pages.value) {
currentPage.value += 1;
}
} else {
currentPage.value = type;
}
emit("change-page", currentPage.value);
};
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
vue.createElementVNode("a", {
onClick: _cache[0] || (_cache[0] = ($event) => changePage(false)),
href: "javascript:;",
class: vue.normalizeClass({ disabled: vue.unref(currentPage) === 1 })
}, "上一页", 2),
vue.unref(currentPage) > 3 ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2, "...")) : vue.createCommentVNode("", true),
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(list), (item) => {
return vue.openBlock(), vue.createElementBlock("a", {
onClick: ($event) => changePage(item),
href: "javascript:;",
class: vue.normalizeClass({ active: vue.unref(currentPage) === item }),
key: item
}, vue.toDisplayString(item), 11, _hoisted_3);
}), 128)),
vue.unref(currentPage) < vue.unref(pages) - 2 ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_4, "...")) : vue.createCommentVNode("", true),
vue.createElementVNode("a", {
onClick: _cache[1] || (_cache[1] = ($event) => changePage(true)),
href: "javascript:;",
class: vue.normalizeClass({ disabled: vue.unref(currentPage) === vue.unref(pages) })
}, "下一页", 2)
]);
};
}
});
exports.default = _sfc_main;